Question

我正在制作一个简单的函数，该函数通过使用循环来添加新选项（0到12之间的数字）。

但是在清单上，我只能看到所有记录中的最后一个记录（12）。我正在控制台上查看，在那里可以看到所有数字。

您知道此代码中可能有什么错误吗？

function loop (j) {
  var j = 0;
  while (j<=12) {
    console.log(j);
    hours.innerHTML = "<option>" + j + "</option>";
    j++;
  };
};

loop();

#alarm {
  height: 200px;
  width: 280px;
  background-color: #dddddd;
  text-align: center;
}

<head></head>
<body>
  <div id="alarm">
    <p>Choose time of alarm ring</p>
    <select id="hours">
    </select>
    <select id="min">
    </select>
  </div>
</body>

Answer 1

您不是添加新选项，而是替换一个新选项，因为您将使用.innerHTML用新的HTML清除旧的=。

如果您使用 += 而不是 = ，则会在现有选项中添加新选项。

function loop (j) {
var j = 0;
while (j<=12) {
  //console.log(j);
  hours.innerHTML += "<option>" + j + "</option>";
  j++;
};
};

loop();

#alarm {
  height: 200px;
  width: 280px;
  background-color: #dddddd;
  text-align: center;
}

<head></head>
<body>
  <div id="alarm">
    <p>Choose time of alarm ring</p>
    <select id="hours">
    </select>
    <select id="min">
    </select>
  </div>

</body>

话虽这么说，使用.innerHTML有许多弊端，因为它会导致HTML解析器不得不重新解析文档，这很浪费并且会导致性能下降。循环使用它更浪费。使用.innerHTML时还可能存在安全性问题，并且事件绑定可能会随之中断。

相反，建议使用DOM API在内存中创建新的DOM元素，然后在循环完成后将它们作为一个单元附加一次。

function loop () {
  // Create a container element in memory only
  var frag = document.createDocumentFragment();

  // While loops can lead to bugs, use for loops instead when possible
  for(i = 1; i < 13; i++) {
    var op = document.createElement("option");  // Create a new DOM element in memory only
    op.textContent = i;                         // Configure the element
    frag.appendChild(op);                       // Append it to the documentFragment
  };
  
  // Now that the loop is done and all the elements have been made,
  // append the elements to the DOM in one batch action
  document.getElementById("hours").appendChild(frag);
};

loop();

#alarm {
  height: 200px;
  width: 280px;
  background-color: #dddddd;
  text-align: center;
}

  <div id="alarm">
    <p>Choose time of alarm ring</p>
    <select id="hours">
    </select>
    <select id="min">
    </select>
  </div>

选择的新选项（循环功能）

1 个答案: