my variable is being given the value null and i don't see why

Question

here is the code, in the console it is telling me that button is null.

<!doctype html>
<html>
    <head>
        <script language="JavaScript" type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <button type=button id="button">Click me</button>
    </body>
</html>

Here is the javascript test.js

function showAlert(){
    alert("this is an alert");
}

var button = document.getElementById("button");

button.addEventListener("click", showAlert);

Put it all in an onLoad handler... – Lightness Races in Orbit Dec 18 '14 at 15:15 — Lightness Races in Orbit, Dec 18 '14 at 15:15

score 2 · Accepted Answer · answered Dec 18 '14 at 15:16

test.js is being included before the <button> element. So, when the script is being executed, the element isn't there. So include your <script> after the element which you're accessing in it is declared.

<!doctype html>
<html>
    <head></head>
    <body>
        <button type=button id="button">Click me</button>
        <script language="JavaScript" type="text/javascript" src="test.js"></script>
    </body>
</html>

my variable is being given the value null and i don't see why

1 Answers1