Javascript loop drop-down options

Question

I have just started learning vanilla JavaScript and I'm trying to create a drop-down menu targeting the HTML snippet.

I attempted to use the loop method to create 25 options but it only displays 1.

My code:

<select name="25dropdown" id="25dropdown">

</select>

<script>

function dropDown(){
for (y = 1; y < 26; y++) {
    document.getElementById("25dropdown").innerHTML = ("<option value =" + y + ">" + y + "</option>");
    }
}
dropDown();

</script>

Possible duplicate of innerHTML with For Loop in Javascript

A Jar of Clay
– A Jar of Clay

2019-03-07 11:30:23 +00:00
Commented Mar 7, 2019 at 11:30 — A Jar of Clay
– A Jar of Clay, Commented Mar 7, 2019 at 11:30

Mamun · Accepted Answer · 2019-03-07 11:21:34Z

2

In each iteration you are replacing the HTML, but you have to keep the previously added HTML as well. Try += instead of =

<select name="25dropdown" id="25dropdown">

</select>

<script>

function dropDown(){
  for (y = 1; y < 26; y++) {
    document.getElementById("25dropdown").innerHTML += ("<option value =" + y + ">" + y + "</option>");
  }
}
dropDown();

</script>

edited Mar 7, 2019 at 11:21

answered Mar 7, 2019 at 11:06

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript loop drop-down options

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related