Question

学习JS，试图让这个小调查工作，但我得到一个未定义的＆＃34;功能＆＃34; HTML元素onclick上的错误。无法弄清楚原因，似乎函数已定义，我无法找到任何语法错误。我也得到一个错误，说＆＃34;苏打水没有定义，＆＃34;但似乎该变量被定义为数组中的一个对象。

<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>代码已自行关闭。
苏打水，先生和sophie必须是字符串。
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

线＆＃39; var myCats = [soda，mr，sophie];＆＃39;是错误的原因。您正在使用字符串作为变量。如果必须使用这些字符串，则使用这些属性创建一个对象，并按如下方式初始化值;

  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 个答案: