Javascript：未使用按鈕onclick事件定義函數？

Question

學習JS，試圖使這個小調查起作用，但是HTML元素onclick出現“未定義函數”錯誤。 無法弄清原因，似乎函數已定義並且我找不到任何語法錯誤。 我還收到一條錯誤消息，指出“未定義soda”，但似乎該變量已定義為數組中的對象。

<html>
<body>

<h3>What cats are in the room?</h3>

Sophie: <input type="checkbox" id="sophieCheck">
<br></br>
Soda: <input type="checkbox" id="sodaCheck">
<br></br>
Mr.: <input type="checkbox" id="mrCheck">
<br></br>

<button onclick="catsInTheRoom()">Try it</button>
<br></br>

<p id="cats"></p>


<script>
function catsInTheRoom() {

    var myCats = [ soda, mr, sophie ];

    if (getElementById("sodaCheck").checked) {
        myCats[0] = 1;
    } else {
        myCats[0] = 0;
    }
    if (getElementById("sophieCheck").checked) {
        myCats[2] = 10;
    } else {
        myCats[2] = 0;
    }
    if (getElementById("mrCheck").checked) {
        myCats[1] = 20;
    } else {
        myCats[1] = 0;
    }

    getElementById("cats").innerHTML = myCats[0] + myCats[1]  + myCats[2];
}

</script>
</body>
</html>

我創建了數組，因此可以使用switch語句的數值來生成基於選中復選框的不同文本。

這個簡單的版本起作用了：

Sophie: <input type="checkbox" id="sohpieCheck">
<br></br>
Soda: <input type="checkbox" id="sodaCheck">
<br></br>
Mr.: <input type="checkbox" id="mrCheck">
<br></br>

<button onclick="myFunction()">Try it</button>

<p id="cats"></p>

<script>

function myFunction() {
    var soda = document.getElementById("sodaCheck").checked;

    if (soda) {
        catBehavior = "Cats are being rascals."; 
    } else {
        catBehavior = "Cats are behaving nicely."; 
    }    

    document.getElementById("cats").innerHTML = catBehavior;
}

</script>

為什么第二個示例有效，但第一個示例無效？

Answer 1

腳本錯誤：soda，mr，sophie用作變量，但在..引發錯誤並停止函數執行之前從未定義。

var myCats = [ 0, 0, 0 ]; // will initialize myCats to 0,0,0

或者您可以先定義變量：

var soda = 0, mr = 0, sophie = 0;

由於您從未在初始myCats定義后使用它們，因此初始化為0應該足夠

Answer 2

您的代碼有一些錯誤。 請檢查修復程序：

<br>標簽是自封閉的。
蘇打水，先生和蘇菲必須為字符串。
getElementById屬於document對象（或任何其他DOM節點）。

 <h3>What cats are in the room?</h3> Sophie: <input type="checkbox" id="sophieCheck"> <br> Soda: <input type="checkbox" id="sodaCheck"> <br> Mr.: <input type="checkbox" id="mrCheck"> <br> <button onclick="catsInTheRoom()">Try it</button> <br> <p id="cats"></p> <script> function catsInTheRoom() { var myCats = [ 'soda', 'mr', 'sophie' ]; if (document.getElementById("sodaCheck").checked) { myCats[0] = 1; } else { myCats[0] = 0; } if (document.getElementById("sophieCheck").checked) { myCats[2] = 10; } else { myCats[2] = 0; } if (document.getElementById("mrCheck").checked) { myCats[1] = 20; } else { myCats[1] = 0; } document.getElementById("cats").innerHTML = myCats[0] + myCats[1] + myCats[2]; } </script>

Answer 3

'var myCats = [蘇打水，先生，蘇菲]行；' 是錯誤的原因。 您正在使用字符串作為變量。 如果必須使用這些字符串，則使用這些屬性創建一個對象，並按如下所示初始化值；

  var myCats ={soda=0, mr=0, sophie=0};
if (getElementById("sodaCheck").checked) {
  myCats.soda = 1;
 } else {
  myCats.soda = 0;
 }
if (getElementById("sophieCheck").checked) {
    myCats.sophie= 10;
} else {
    myCats.sophie = 0;
}
if (getElementById("mrCheck").checked) {
   myCats.mr = 20;
} else {
    myCats.mr = 0;
}

getElementById("cats").innerHTML = myCats.soda  + myCats.mr  + myCats.sophie;
}

Javascript：未使用按鈕onclick事件定義函數？

問題描述

3 個解決方案

解決方案1
1 2017-11-18 00:45:49

解決方案2
0 已采納 2017-11-18 01:08:44

解決方案3
0 2017-11-18 01:15:05

Javascript：未使用按鈕onclick事件定義函數？

問題描述

3 個解決方案

解決方案1 1 2017-11-18 00:45:49

解決方案2 0 已采納 2017-11-18 01:08:44

解決方案3 0 2017-11-18 01:15:05

解決方案1
1 2017-11-18 00:45:49

解決方案2
0 已采納 2017-11-18 01:08:44

解決方案3
0 2017-11-18 01:15:05