Populate HTML with Javascript array Asked Jan 21 '18 at 00:27 Active Jan 22 '18 at 00:28 Viewed 202 times 0 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); javascript html arrays leaflet edited Jan 22 '18 at 00:28 Lauraducky 674 11 25 asked Jan 21 '18 at 00:27 Adam 33 6 1 `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 Jan 21 '18 at 00: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 Jan 21 '18 at 00: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 Jan 21 '18 at 00:34 I have deleted var parent = document.getElementById("parent"); and parent.appendChild(child); – Adam Jan 21 '18 at 00:36 However my problem is now that the selection box appears empty instead of displaying what is in the array – Adam Jan 21 '18 at 00:36 `parent.appendChild(child);` must not be deleted. – connexo Jan 21 '18 at 00:37 "Uncaught TypeError: parent.appendChild is not a function" – Adam Jan 21 '18 at 00:37 You need to make sure that at the moment in time when `parent.appendChild(child);` is executed that the DOM has an element with `id=parent`. – connexo Jan 21 '18 at 00:42 this._div.innerHTML = ' is this not created on this line though? – Adam Jan 21 '18 at 00:46

Answer 1

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.