Why is this javascript loop printing out numbers instead of Options?

Question

function createShiftsForm(day){
    document.getElementById("shifts").innerHTML += day + ' morn: <select name="' + day + 'm"><option value="0" selected>0</option>';
    for (i=1; i <= 20; i++){
    document.getElementById("shifts").innerHTML += '<option value="' + i + '">' + i + '</option>';
}
    document.getElementById("shifts").innerHTML += '</select>';


}

When it prints out it prints all 21 numbers but only the number 0 is printed as an option for the selector.

Answer 1

The string that you pass to the innerHTML is not valid(you do it step-by-step, so select element doesn't have a closing tag).

function createShiftsForm(day){
    var container = day + ' morn: <select name="' + day + 'm"><option    value="0" selected>0</option>';
    for (i=1; i <= 20; i++){
        container += '<option value="' + i + '">' + i + '</option>';
    }
    container += '</select>';
    document.getElementById("shifts").innerHTML = container;
}