Download Javascript Array on a Combobox

Question

I would like help in this small problem, I have to do a combobox shows 5 states being loaded by an array in javascript, my code is like this.

HTML

<select >
    <option id="estado"></option>
</select>

My Javascript is like this

var select = document.getElementById("estado"); 
var options = ["São Paulo", "Rio de Janeiro", "Paraná", "Pernambuco", "Rio Grande do Sul"]; 

    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        //console.log(el);
        select.appendChild(el);
    }

Debugging in the console.log brings the cute results as it should be. But when printing the object it brings the following error.

Uncaught Typeerror: Cannot read Property 'appendchild' of null.

Answer 1

The id should be on select and not in the option.

Anyway the current code should not present the error that you showed, this seems more a problem with the order of things, IE, check if it is not calling the script before the creation of the elements, this is a common mistake.

var select = document.getElementById("estado"); 
var options = ["São Paulo", "Rio de Janeiro", "Paraná", "Pernambuco", "Rio Grande do Sul"]; 

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    
    select.appendChild(el);
}

<select id="estado">
    <option></option>
</select>