CODEWITHSUNDEEP
javascripthtmlfor-loop
Play38
Play38

Reputation: 127

Fill a dropdown menu from 1 to 100 using javascript

I've tried to write a javascript code which fills the select tags with option tags from 1 to 100.

But instead of giving me 99 options, it gives me only one option with the 100 value on it.

I would be happy to understand and to know how to solve this problem.

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>

Upvotes: 4

Views: 4118

Answers (6)

LMS
LMS

Reputation: 74

Every loop you will assign new value to selectAge.innerHTML but you actually want for every loop to add new value to the existing one. You can do it with += witch is the same as selectAge.innerHTML = selectAge.innerHTML + ....

Upvotes: 2

showdev
showdev

Reputation: 29188

You are overwriting the innerHTML upon each iteration of the loop.
One solution is to concatenate with the addition assignment operator: +=.

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

As mentioned by Ivan, to avoid rewriting the innerHTML 100 times, I suggest building a string first:

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>

Upvotes: 10

Roko C. Buljan
Roko C. Buljan

Reputation: 206505

Beside (as already noted by others) you're using = instead of += to concatenate, it's a bad idea to manipulate 100 times the DOM,
instead, use innerHTML only once:

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>

Also, to make sure DOM is parsed ready to be manipulated, (instead of window.onload and similar) simply place your <script> tag right before the closing </body> tag.

Upvotes: 5

Rob Monhemius
Rob Monhemius

Reputation: 5144

You are overwriting the 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>

Upvotes: 0

AmerllicA
AmerllicA

Reputation: 32572

Actually you must contact the changes to innerHTML in every epoch of your loop, see below codes:

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

I write above code in ES6 style, it is common for trend browsers now.

Upvotes: 1

Veljko Ilić
Veljko Ilić

Reputation: 161

Try just adding a +=.

This will add the every single option from 0 to 100, because += means that the value will be added to the value that previously existed.

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

Upvotes: 3

Related Questions