Javascript 代码执行时不执行任何操作

Question

我正在尝试构建一个增量游戏，但无论我在本地访问它还是将其上传到网络主机，我的 JavaScript 代码都不起作用。

HTML 如下:

<script src="game.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
 <h1>Incremental!</h1>

<button id="click" type="button" class="btn btn-primary btn-lg btn-block">CLICK ME</button>
<hr>
<p>Clicks: <span id="total_clicks">0</span>
</p>
<p>Auto Clicks Per Second: <span id="autoClickers">0</span>
</p>
<hr>
<button id="autoClickerBuy" class="btn btn-info btn-block">BUY AN AUTOCLICKER</button>
<!--ADDED--><button id="upgradeTwoClicks" class="btn btn-danger btn-block">TWO CLICKS PER CLICK</button>
<!--ADDED--><button id="upgradeTwoAutoClicks" class="btn btn-danger btn-block">TWO CLICKS PER AUTOCLICKER</button></div>

Javascript文件(game.js)如下:

var totalClicks = 0;

$('#click').click(function(){
totalClicks++;
document.getElementById("total_clicks").innerHTML = totalClicks;
});

我不明白为什么它不起作用......它实际上是教程的复制和粘贴。

Answer 1

HTML 中开头出现的脚本按顺序执行，按顺序。

找不到来自 jQuery 的 $ 函数，因为游戏代码 (game.js) 是在 jQuery 库加载之前运行的。更改顺序:

<!-- dependencies first -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- dependents -->
<script src="game.js"></script>

<小时/>

脚本也可以“异步”加载，但这与这里无关。