JavaScript計數器增量不起作用

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 ，這就是問題所在。

這是一個工作中的JSFiddle。

這不只是一個提示-你幾乎總是希望有DOM（HTML中）加載后您的JavaScript負載的具體問題，。 因此，可以將所有腳本包含在window.onload或$(document).ready() （jQuery）事件處理程序中，或將腳本放在<body>的末尾，如本例所示。

根據您在注釋中的請求，如果要使用外部腳本，請執行相同的操作。 將其放在外部文件中，並在正文末尾添加<script src="yourscript.js"></script> ，它應該具有相同的功能。

JavaScript計數器增量不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2016-06-23 20:27:15

JavaScript計數器增量不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2016-06-23 20:27:15

解決方案1
1 已采納 2016-06-23 20:27:15