I have the following code in a separate javascript file.

var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var oneText = document.getElementById("oneText");
var twoText = document.getElementById("twoText");
var threeText = document.getElementById("threeText");
var fourText = document.getElementById("fourText");
var fiveText = document.getElementById("fiveText");

function buttonClicked() {
console.log('Hello!');
}

The javascript file is linked in my HTML file using.

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

I put a button in my HTML file with an onclick call of buttonClicked, I have tested it and when the button is pressed it returns 'Hello!' in the javascript console (as I was hoping) but when I try to change one of the elements on the HTML elements I get an error saying.

TypeError: one is null 

I'd like to now if I should be using some import statement or if I should be using inline javascript.

Cheers

I have the following code in a separate javascript file.

var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var oneText = document.getElementById("oneText");
var twoText = document.getElementById("twoText");
var threeText = document.getElementById("threeText");
var fourText = document.getElementById("fourText");
var fiveText = document.getElementById("fiveText");

function buttonClicked() {
console.log('Hello!');
}

The javascript file is linked in my HTML file using.

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

I put a button in my HTML file with an onclick call of buttonClicked, I have tested it and when the button is pressed it returns 'Hello!' in the javascript console (as I was hoping) but when I try to change one of the elements on the HTML elements I get an error saying.

TypeError: one is null 

I'd like to now if I should be using some import statement or if I should be using inline javascript.

Cheers

• javascript
• html

Share Improve this question Follow asked Jun 27, 2015 at 9:05 Curious ProgrammerCurious Programmer 43311 gold badge55 silver badges1414 bronze badges 6

• 4 Add <script src="main.js"></script> at the end of the page – Arun P Johny Commented Jun 27, 2015 at 9:06
• The HTML or the Javascript file? – Curious Programmer Commented Jun 27, 2015 at 9:09
• Put it just before the </body> in your HTML. – Denys Séguret Commented Jun 27, 2015 at 9:09
• Tried it on the HTML file, worked, thx soooo much. – Curious Programmer Commented Jun 27, 2015 at 9:11
• ..Or place your code into onload event handler – hindmost Commented Jun 27, 2015 at 9:13

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

You should add the SCRIPT tag that pulls in main.js below the HTML tag that has the one id. You can think of it as the HTML is converted to DOM by the browser in order. That includes the loading of JavaScript that has references to DOM. If you put the SCRIPT tag in the header, it will be parsed and executed in the context of the DOM at that point in time (which will likely not have the element with one id). By putting the inclusion of the JavaScript file at the bottom of the page, you avoid needing to do something like the jQuery $(documnt).ready(...) -- instead, you force execution to happen when the HTML has been converted to DOM.

Another way you can do this is by putting all your code in a window.onload function, like this:

window.onload = function() {
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    var four = document.getElementById("four");
    var five = document.getElementById("five");
    var oneText = document.getElementById("oneText");
    var twoText = document.getElementById("twoText");
    var threeText = document.getElementById("threeText");
    var fourText = document.getElementById("fourText");
    var fiveText = document.getElementById("fiveText");

    function buttonClicked() {
        console.log('Hello!');
    }
}