JavaScript for-loop example from MDN not working

Question

I was trying to run an example from MDN about for-loop in javaScript and for some reason it is not working. Here it is the code from MDN Loops and Iterations :

<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
});
</script>

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>

I put it inside a html document and tried to run it. Then I got an error that the button, which I was trying to reach by id is not null, so I switched the places of the script and the html code.

When I ran it again it did not work and in the Firefox console it was written that the selectObject parameter in the function is undefined . I think that howMany(document.selectForm.musicTypes) is undefined and the alert is not popping out. Does anyone have some suggestions why this might be?

Answer 1

This is a poor example from MDN. The reason it's not working is that your script is executed before your DOM elements are rendered. That means it won't find the button (because it doesn't exist) and the rest of your code won't be run.

Move the script tag after the HTML or inside of an on-ready event.

Example: http://jsbin.com/kotoziqaco/1/edit

Answer 2

put the script after the html, this is because the script fires before the html.

PS

Do not put the script inside the form, just after the form like this

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>
<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
});
</script>

Answer 3

try this:

<script>
function howMany(selectObject) {
    var numberSelected = 0;
    for (var i = 0; i < selectObject.options.length; i++) {
        if (selectObject.options[i].selected) {
            numberSelected++;
        }
    }
    return numberSelected;
}
document.addEventListener("DOMContentLoaded", function(event) {
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
    });
});
</script>