Code functioning in JSFiddle environment but not when run otherwise

Question

So when working on another question, here, I got a great answer from @earl3s and a link to a jsfiddle of the work and it appeared to work fine but when trying to run it in repl.it it gave me an error, and when trying to run it locally I got an error reading "Uncaught TypeError: Cannot read property 'add' of null" on line 19. I may be submitting them wrong or the code may be written incorrectly, and insight would be appreciated. Here is the origninal code:

<script>
    if (window.location.href.substring(0,9) === "http://ww") {
    var home_var = "bing.com";    
    }
    else if (window.location.href.substring(0,9) === "https://p") {
    var home_var = "https://px.multiscreensite.com/index.php?url=bing.com";
    }
    else {
    var home_var = "1";
    }
    var select= document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = "Hope Page";
    option.value = home_var;
    select.add(option);
    console.log(home_var);
</script>

<select id="mySelect" OnChange="window.location.href=this.value">
    <option>Tagged Stuff and Navigation</option>
</select>

Try moving your script to the end of the body – spaniol6 Jun 21 '16 at 22:07 — spaniol6, Jun 21 '16 at 22:07
Thank you, that is embarrassingly simple! – Aaron Quitta Jun 21 '16 at 22:07 — Aaron Quitta, Jun 21 '16 at 22:07

score 2 · Accepted Answer · answered Jun 21 '16 at 22:56

In JSFiddle, the JavaScript is automatically loaded after the document loads. In repl, you had the JavaScript inserted before the dom actually loaded, so mySelect didn't exist then. You have to add the JavaScript after the dom loads, i.e. at the end of the body tag.

Here's a working example.

Code functioning in JSFiddle environment but not when run otherwise

1 Answers1