Вы не добавляя новые опции, вы заменяете предыдущую новой, потому что вы стираете старый .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>