Javascript only working when inside the html document [duplicate]

Question

I been trying to have an array populate a drop down, I got this examples from this post: JavaScript - populate drop down list with array

I'm using this html:

 <select id="selectNumber">
 <option>Choose a number</option>
 </select>

with this js

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 

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);
}​

But it only works if I place the js inside the HTML document, if I place it on a separate file it gives me this errror in Chrome:

>Uncaught TypeError: Cannot read property 'appendChild' of null  at g.js:8

I also tryed this one but same thing happens:

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 

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

The code only works if I put it inside the HTML file but if i have it on a separate file it gives me that error.

Any idea why?

Answer 1

You should load the js file at the end of the body. This will ensure you that the element your are looking for exists in your DOM.

This can be avoided by using a ready check. Native Javascript example:

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

Answer 2

JQuery way

$(() => { //dom ready, my code here can access the dom })

Answer 3

try to use

$( document ).ready(function() {
   //set your code 
});

Answer 4

<script src="filename.js"></script>

try adding this in head tag if problem persists make sure that you have placed JS file in the same folder as of html file