Home/ Questions/Q 8476537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T18:12:24+00:00

Here is my code: <!doctype html> <html> <head> <meta charset=utf-8> <title>Date Picker</title> </head> <body>

  • 0

Here is my code:

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <title>Date Picker</title>
</head>
<body>
<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<select id="demo">
</select>
<p id="demo"></p>
<script>
function myFunction()
{
    var i;
    for (i=1;i<=5;i++){
      document.getElementById("demo").innerHTML="<option value="+i+">"+i+"</option>";
    }
}
</script>
</body>
</html>

all I want is when I press the button dropdown box will generate an option like this:

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

but I get only this code

<option value="5">5</option>

it only show 5 on the option. Please help.. Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    [Edit 2022] Old answer, modernized a bit and added a snippet (ES)

    You are overwriting the contents of ‘demo’ in every iteration. It’s better to use DOM methods to add options to a select, in this case new Option([arguments]):

    function myFunction(selector) {
  for (let i = 1; i <= 5; i++) {
    selector.options[i] = new Option(i + 1,i + 1);
  }
}
//usage:
myFunction(document.getElementById("demo"));

    By the way: check your HTML. The id of elements should be unique. Using your HTML, how can your script know which element is meant with document.getElementById("demo")?

    Below a demo snippet for another (ES) way of looping. It uses event delegation for handling the button click.

    document.addEventListener(`click`, handle);
const loop = (n, lambda) => [...Array(n)].forEach( lambda );

const setSelectOptions = forSelector => [...Array(5)].forEach( (_, i) => 
  forSelector.options[i] = new Option(`option ${i + 1}`, i + 1) );
    
setSelectOptions(document.querySelector(`#demo`));

function handle(evt) {
  if (evt.target.id === `demoLoop`) {
    document.querySelector(`#loopDemo`).textContent += 
      [...Array(5)].map( (_, i) => `${i+1} Hello!`).join(`\n`) + `\n`;
  }
}
    <select id="demo"></select>
<p>
  Click the button to loop through a 
  block of code five times.</p>
<button id="demoLoop">Try it</button>
<pre id="loopDemo"></pre>
    • 0