Question

我的html页面上有一个计数器，我试图使用按钮在使用+按钮时将计数器递增1，并在使用 - 按钮时将计数器减1，最多10个计数（0最小值）。问题是javascript似乎根本不起作用。当我点击按钮时，没有任何反应。我在我的标题中有google主机jquery。我已经在js小提琴上尝试了这个，它可以工作但不在我的页面上。任何帮助将不胜感激。

html（这些在div中）

   <button onclick="countDown();">-</button>
            <span id="counter">0</span>
            <button onclick="countUp();">+</button>

Javacript

    <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>

编辑：脚本位于jquery脚本

之后的标题中

Answer 1

问题很可能是display未设置，因为文档尚未加载，因此document.getElementById("counter")不会返回元素（#counter元素尚不存在）。不要将脚本放在标题中，而是将其放在#counter范围之后。

您可以通过打开控制台来查看是否属实。如果有错误消息，那就是Error: trying to set property "innerHTML" of undefined，这就是问题所在。

Here is a working JSFiddle.

这不仅仅是一个特定于问题的提示 - 您几乎总是希望在加载DOM（HTML）后加载 JavaScript。因此，要么将所有脚本都包含在window.onload或$(document).ready()（jQuery）事件处理程序中，要么将脚本放在<body>的末尾，就像这样。

根据您在评论中的请求，如果您想使用外部脚本，请执行相同的操作。把它放在一个外部文件中，并在主体的末尾包含<script src="yourscript.js"></script>，它应该做同样的事情。

Javascript计数器增量不起作用

1 个答案: