我的 html 页面上有一个计数器，我尝试使用按钮在使用 + 按钮时将计数器增加 1，并在使用 - 按钮时将计数器减少 1，最多 10 次计数(0最低限度)。问题是 javascript 似乎根本不起作用。当我单击按钮时，没有任何反应。 我的标题中有 google 托管 jquery 。 我已经在 js fiddle 上尝试过了，它可以工作，但不能在我的页面上。任何帮助将不胜感激。
html(这些位于 div 内)
<button onclick="countDown();">-</button>
<span id="counter">0</span>
<button onclick="countUp();">+</button>
JavaScript
<script type="text/javascript">
var minVal = 0, maxVal = 10, clicks = 0,
display = document.getElementById("counter");
function countUp() {
clicks = Math.min(maxVal, clicks + 1);
display.innerHTML = clicks;
}
function countDown() {
clicks = Math.max(minVal, clicks - 1);
display.innerHTML = clicks;
}
</script>
编辑:该脚本位于我的 header 中 jquery 脚本之后
最佳答案
最有可能的问题是 display未设置，因为文档尚未加载，因此 document.getElementById("counter")不会返回元素(#counter 元素尚不存在)。不要将脚本放在 header 中，而是尝试将其放在 #counter 之后。跨度。
您可以通过打开控制台来检查这是否属实。如果出现错误消息，则类似于 Error: trying to set property "innerHTML" of undefined ，这就是问题所在。
这不仅仅是一个特定于问题的提示 - 您几乎总是希望在 DOM(HTML)加载之后加载 JavaScript。因此，要么将所有脚本放在 window.onload 中或$(document).ready() (jQuery) 事件处理程序，或将脚本放在 <body> 的末尾就像这个例子一样。
根据您在评论中的请求，如果您想使用外部脚本，请执行相同的操作。将其放入外部文件并包含 <script src="yourscript.js"></script>在正文的末尾，它应该做同样的事情。
关于Javascript 计数器增量不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38001165/