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?

danchik · Accepted Answer · 2017-11-18 00:51:20Z

1

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

edited Nov 18, 2017 at 0:51

answered Nov 18, 2017 at 0:45

danchik

18110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pablo Darde · Accepted Answer · 2017-11-18 01:21:05Z

Your code has some errors. Please, check the fixes:

<br> tags are self closed.
soda, mr and sophie must be strings.
getElementById belongs to the document object (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>

Lolu Omosewo · Accepted Answer · 2017-11-18 01:15:05Z

0

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;
}

answered Nov 18, 2017 at 1:15

Lolu Omosewo

2631 silver badge4 bronze badges

Collectives™ on Stack Overflow

Javascript: function not defined with button onclick event?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related