Заполните раскрывающееся меню от 1 до 100, используя JavaScript

Question

Я пытался написать код JavaScript, который заполняет теги выбора тегами параметров от 1 до 100.

Но вместо того, чтобы дать мне 99 вариантов, он дает мне только одну опцию со значением 100 наэто.

Я был бы рад понять и узнать, как решить эту проблему.

var selectAge = document.getElementById("selectAge");
document.onload = (function(){
  for(let i = 1; i<=100 ; i++)
    selectAge.innerHTML ="<option>" + i + "</option>";
})();

<form>
  <label>
    Your age:
    <select name="age" id="selectAge"></select>
  </label>
</form>

Answer 1

Каждому циклу вы присваиваете новое значение selectAge.innerHTML, но на самом деле вы хотите, чтобы каждый цикл добавлял новое значение к существующему.Вы можете сделать это с += ведьмой, такой же как selectAge.innerHTML = selectAge.innerHTML + ....

Answer 2

На самом деле вы должны связываться с изменениями innerHTML в каждую эпоху вашего цикла, см. Коды ниже:

const selectAge = document.getElementById("selectAge");
document.onload = ( () => {
  for (let i = 1; i <= 100; i++)
    selectAge.innerHTML += `<option>${i}</option>`;
})();

Я пишу код выше в стиле ES6, это характерно для трендовых браузеров сейчас.

Answer 3

Помимо (как уже отмечалось другими) вы используете = вместо += для объединения, плохая идея манипулировать 100-кратным DOM,
вместо этого использовать только innerHTMLодин раз:

let ageOptions = "";
for(let i=1; i<=100 ; i++) ageOptions += `<option>${i}</option>`;

document.querySelector("[name=age]").innerHTML = ageOptions;

Your age: <select name="age"></select>

Кроме того, чтобы убедиться, что DOM анализируется и готов к работе (вместо window.onload и аналогичных) просто поместите тег <script> прямо передзакрывающий тег </body>.

Answer 4

Попробуйте просто добавить +=.

. Это добавит каждую опцию от 0 до 100, поскольку += означает, что значение будет добавлено к ранее существовавшему значению.

selectAge.innerHTML +="<option>" + i + "</option>";

Answer 5

Вы перезаписывает innerHTML.

var selectAge = document.getElementById("selectAge");
// use addEventlistener or you will overwrite other 'onload' events
window.addEventListener('load', () => {
  for(let i = 1; i<=100 ; i++){
    let option = document.createElement('option');
        option.innerText = i;
    selectAge.appendChild( option );
  }
}); // end onload

<form>
  <label>
    Your age:
    <select name="age" id="selectAge"></select>
  </label>
</form>

Answer 6

Вы перезаписываете innerHTML при каждой итерации цикла.
Одним из решений является объединение с оператором дополнительного присваивания : +=.

var selectAge = document.getElementById("selectAge");
for (let i = 1; i <= 100; i++)
  selectAge.innerHTML += "<option>" + i + "</option>";

<select name="age" id="selectAge"></select>

---

Как уже упоминал Иван, чтобы не переписывать innerHTML 100 раз, я предлагаю сначала создать строку:

var selectAge = document.getElementById("selectAge");
var contents;

for (let i = 1; i <= 100; i++) {
  contents += "<option>" + i + "</option>";
}

selectAge.innerHTML = contents;

<select name="age" id="selectAge"></select>