Javascript 是說 function 沒有定義

Question

只是想用兩個按鈕創建一個簡單的計數器，一個加1，另一個減1。 我正在使用 JS 和 HTML。 JS 說 add() 和 sub() 都不是函數。 此代碼適用於 codepen.io、JSFiddle 和 JSHint 只是說“兩個未使用的變量”。

HTML

<div class="main">
  <div id="button">
    <h1>Click Me</h1>
    <p>Number<button id="add" onclick="add()">+</button></p>
    <span id="result"></span>    
    <button id="sub" onclick="sub()">-</button>
   </div>
</div>

JS

var x = 0


function add(){
    document.getElementById("result").innerHTML = x+=1;
}

function sub(){
    document.getElementById("result").innerHTML = x-=1;
}

Answer 1

我認為應該是這樣的：

 var x = 0 function add() { document.getElementById("result").innerHTML = x += 1; } function sub() { document.getElementById("result").innerHTML = x -= 1; }

 <div class="main"> <div id="button"> <h1>Click Me</h1> <p>Number<button id="add" onclick="add()">+</button></p> <span id="result"></span> <button id="sub" onclick="sub()">-</button> </div> </div>

你應該在<script></script>標簽之間寫 JavaScript

<div class="main">
  <div id="button">
    <h1>Click Me</h1>
    <p>Number<button id="add" onclick="add()">+</button></p>
    <span id="result"></span>    
    <button id="sub" onclick="sub()">-</button>
   </div>
</div>
<script>
    var x = 0

    function add(){
        document.getElementById("result").innerHTML = x+=1;
    }

    function sub(){
        document.getElementById("result").innerHTML = x-=1;
    }
</script>

Answer 2

您應該避免在沒有分號的情況下在同一行中使用兩次 assing 運算符。

如下所示，您必須在同一行中為每個 function 分配運算符。 在代碼中類似於說
b = a = a + 1

 var x = 0 function add(){ x+=1; document.getElementById("result").innerHTML = x.toString() } function sub(){ x-=1; document.getElementById("result").innerHTML = x.toString() }

如果您仍然喜歡在同一行中使用，您會發現這個很有用。

var x = 0


function add(){
    document.getElementById("result").innerHTML = (++x).toString();
}

function sub(){
    document.getElementById("result").innerHTML = (--x).toString();
}

Answer 3

這個你可以試試

變量 x = 0

function add(){
    document.getElementById("result").innerHTML = (++x).toString();
}

function sub(){
    document.getElementById("result").innerHTML = (--x).toString();
}