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