Question

我试图从MDN运行一个关于javaScript for-loop的例子，由于某种原因它无法正常工作。这是来自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>

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

当我再次运行它时它不起作用，并且在Firefox控制台中写入函数中的selectObject参数为undefined。我认为howMany(document.selectForm.musicTypes)是undefined并且警报没有弹出。有没有人有一些建议为什么会这样？

Answer 1

这是MDN的一个不好的例子。它不起作用的原因是你的脚本在渲染DOM元素之前执行。这意味着它无法找到按钮（因为它不存在），其余的代码也无法运行。

在HTML之后或在就绪事件内移动脚本标记。

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

Answer 2

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

P.S

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

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

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

3 个答案: