Javascript：未使用按钮onclick事件定义函数？

Question

Learning JS, trying to get this little survey to work, but I get a "function not defined" error at HTML element onclick. 学习JS，试图使这个小调查起作用，但是HTML元素onclick出现“未定义函数”错误。 Can't figure out why, it seems like the function is defined and I can't find any syntax errors. 无法弄清原因，似乎函数已定义并且我找不到任何语法错误。 I also get an error saying that "soda is not defined," but it seems like that variable is defined as an object in the array. 我还收到一条错误消息，指出“未定义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>

I created the array so I can use the numerical values for a switch statement to produce different text based on which checkboxes are checked. 我创建了数组，因此可以使用switch语句的数值来生成基于选中复选框的不同文本。

This simpler version worked: 这个简单的版本起作用了：

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>

Why does the second example work, but not the first one? 为什么第二个示例有效，但第一个示例无效？

Answer 1

script error: soda, mr, sophie are used as variables but are never defined before .. throws error and stops function execution. 脚本错误：soda，mr，sophie用作变量，但在..引发错误并停止函数执行之前从未定义。

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

or you can defined variables first: 或者您可以先定义变量：

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

bunt since you never use them after initial myCats definition, initializing to 0s should enough 由于您从未在初始myCats定义后使用它们，因此初始化为0应该足够

Answer 2

Your code has some errors. 您的代码有一些错误。 Please, check the fixes: 请检查修复程序：

<br> tags are self closed. <br>标签是自封闭的。
soda, mr and sophie must be strings. 苏打水，先生和苏菲必须为字符串。
getElementById belongs to the document object (or any other DOM node). 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

the line 'var myCats = [ soda, mr, sophie ];' 'var myCats = [苏打水，先生，苏菲]行；' is the cause of the error. 是错误的原因。 You are using strings as variables. 您正在使用字符串作为变量。 If you must use those strings, then create an object with those properties and initialize the values as follows; 如果必须使用这些字符串，则使用这些属性创建一个对象，并按如下所示初始化值；

  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