Question:
I would like help with this little problem, I have to make a combobox that 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 console.log it brings the results cute as it should be. But when printing the object it brings the following error.
Uncaught TypeError: Cannot read property 'appendChild' of null.
Answer:
The id should be in the select
and not in the option
.
Anyway, the current code shouldn't present the error you showed, this seems more like a problem with the order of things, that is, make sure you're not calling the script
before creating the elements, this is a very common error.
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>