Javascript: function not defined with button onclick event?
Question
Learning JS, trying to get this little survey to work, but I get a "function not defined" error at HTML element 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.
<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.
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?
3 answers
solution1
1 2017-11-18 00:45:49
script error: soda, mr, sophie are used as variables but are never defined before .. throws error and stops function execution.
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
solution2
0 ACCPTED 2017-11-18 01:08:44
Your code has some errors. Please, check the fixes:
-
<br>tags are self closed. - soda, mr and sophie must be strings.
-
getElementByIdbelongs to thedocumentobject (or any other DOM node).
<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>
solution3
0 2017-11-18 01:15:05
the line 'var myCats = [ soda, mr, sophie ];' 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.