来自MDN的JavaScript for循环示例不起作用

Question

我试图从MDN运行一个有关javaScript中的for循环的示例，由于某种原因，该示例不起作用。 这是MDN循环和迭代中的代码：

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

我将其放在html文档中并尝试运行它。 然后我得到一个错误，即我试图通过id到达的按钮不为null，因此我切换了脚本和html代码的位置。

当我再次运行它时，它不起作用，并且在Firefox控制台中，该函数中的selectObject参数undefined 。 我认为howMany(document.selectForm.musicTypes)是undefined ，并且警报不会弹出。 有人对此有何建议？

Answer 1

这是来自MDN的不良示例。 它不起作用的原因是在呈现DOM元素之前执行了脚本。 这意味着它将找不到该按钮（因为它不存在），并且其余代码也不会运行。

将脚本标记移到HTML后面或就绪事件内部。

示例： http ： //jsbin.com/kotoziqaco/1/edit

Answer 2

将脚本放在html之后，这是因为脚本在html之前触发。

聚苯乙烯

不要将脚本放在表单中，就像这样在表单之后

<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

尝试这个：

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