Populate HTML <select> with Javascript array

Question

I'm attempting to populate a HTML selection box from a JavaScript array, however when I run my page my console is outputting the following:

Uncaught TypeError: Cannot read property 'appendChild' of null at hello.html:113

However, because it is created by JavaScript innerHTML I cannot select it. Is there another way of selecting this?

var police_api_dates = ["&date=2017-03",];
var info = L.control();
info.onAdd = function (mymap) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};

info.update = function (properties) {
    this._div.innerHTML = '<select id="parent"></select><h4>Highlighted Postcode</h4>' +  (properties ?
        '<b> Postcode: ' + properties.Name
        : 'Hover over a state');
};
var parent = document.getElementById("parent");
for ( var pos = 0; pos < police_api_dates.length; pos++)
{
    //create an <option> to add the <select>
    var child = document.createElement("option");

    //assign values to the <option>
    child.textContent = police_api_dates[pos]
    child.value = pos;

    //attach the mew <option> to the <selection>
    parent.appendChild(child);
}


info.addTo(mymap);

var parent = document.getElementById("parent"); is only evaluated once when JS executes this line. Later, in info.update(), you replace this element with a new element (even though that has the same id, it's a different element). — connexo
– connexo, Commented Jan 21, 2018 at 0:31
Would it be possible to suggest a fix, as you have pointed out I can still not see where I am going wrong. — Adam
– Adam, Commented Jan 21, 2018 at 0:34
Just delete the line var parent = document.getElementById("parent"); and you're good to go. This restores the default browser behaviour of making id'd elements accessible by their id without having to declare a variable and using document.getElementById. — connexo
– connexo, Commented Jan 21, 2018 at 0:34
I have deleted var parent = document.getElementById("parent"); and parent.appendChild(child); — Adam
– Adam, Commented Jan 21, 2018 at 0:36
However my problem is now that the selection box appears empty instead of displaying what is in the array — Adam
– Adam, Commented Jan 21, 2018 at 0:36

user4723924 · Accepted Answer · 2018-01-21 01:30:48Z

0

Use this method...

var police_api_dates = ["&date=2017-03",];

var info = L.control();


info.onAdd = function (mymap) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};


var S='';


for(var i=0; i<police_api_dates.length; i++){

  S=S+'<option value="'+i+'">'+police_api_dates[i]+'</option>';

}



info.update = function (properties) {

 info.innerHTML='<select id="parent">'+S+'</select>'+'<h4>Highlighted Postcode</h4>' + (properties ? '<b> Postcode: ' + properties.Name : 'Hover over a state');
};


parent.innerHTML=S; // Insert the options

parent.selectedIndex=3; // Set your default value


info.addTo(mymap);

NB: I would avoid using variable/ID names like "child" and "parent" because you're setting yourself up for javascript reserved word conflicts.

Updated code to get your sequence in order... let's see how that goes.

edited Jan 21, 2018 at 1:30

answered Jan 21, 2018 at 0:47

user4723924

212 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Adam Over a year ago

Having trouble implementing this into my code, i've replaced my code but fields still show empty.

user4723924 Over a year ago

Can you please use "P" instead of "parent" and maybe "C" instead of "child" for variables/ID?

Adam Over a year ago

I have done, however I'm a bit lost it's still not working.

user4723924 Over a year ago

Try this... it's difficult to help you from a distance. :)

Adam Over a year ago

jsfiddle.net/uteey91y/4 This is updated using your code, as you can see no info dive box appears in the top.

|

Collectives™ on Stack Overflow

Populate HTML <select> with Javascript array

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related