JavaScript error when function called in JavaScript, not when called in HTML

Question

So I had an idea to let the computer guess the number with JavaScript as code language. I know exactly what it must do, but it isn't doing it. The idea is (to see if it works) to get a random number between 1 and 100, when you open the webpage. Weird thing, is that if I call the function in the same JavaScript file it gives an error, but if I call the function with a HTML button, it's working totally fine! The F12-console gives the following error:

Unable to set property 'innerHTML' of undefined or null reference

I have the following code:

var guessTheNumber = function() {

// var number = prompt("Tell me a number between 1 and 100.");
var x = document.getElementById("JS1");

x.innerHTML = Math.floor((Math.random() * 100) + 1);
}


guessTheNumber();

<!DOCTYPE html>
<html>
<head>
 <title>JS test</title>

 <script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
 <button onclick="guessTheNumber()"></button>
 <p class="test">test</p>
 <p id="JS1"></p>
</body>
</html>

I tried Microsoft Edge and Google Chrome as browsers, no results. I do not know what I am doing wrong, so any help is appreciated!

Yous js call is done before the dom is ready – Pascalz Jul 08 '17 at 18:48 — Pascalz, Jul 08 '17 at 18:48
okay and how can I fix that? – Brent Meeusen Jul 08 '17 at 18:48 — Brent Meeusen, Jul 08 '17 at 18:48

score 5 · Accepted Answer · answered Jul 08 '17 at 18:49

The problem is that the javascript file is loaded BEFORE the DOM, so the document.getElementById("JS1"); would be undefined.

To easily fix this, load the <script> at the BOTTOM of the <body> tag:

<!DOCTYPE html>
<html>
<head>
    <title>JS test</title>


</head>
<body>
    <button onclick="guessTheNumber()"></button>
    <p class="test">test</p>
    <p id="JS1"></p>

<script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>

Though generally script at bottom of body is good practice. – frozen Jul 08 '17 at 18:52 — frozen, Jul 08 '17 at 18:52

jdmdevdotnet · Answer 2 · 2017-07-08T18:54:19.173

1

<script>
// self executing function here
var guessTheNumber = function() {

    // var number = prompt("Tell me a number between 1 and 100.");
    var x = document.getElementById("JS1");

    x.innerHTML = Math.floor((Math.random() * 100) + 1);
}
(function() {

   // your page initialization code here
   // the DOM will be available here
   guessTheNumber();
})();
</script>

You have to wait until the dom is ready.

Also never declare your script in the head move your script tag below body.

edited Jul 08 '17 at 18:54

answered Jul 08 '17 at 18:47

jdmdevdotnet

1
2
19
50

What was the problem, and how does this fix it? – Jul 08 '17 at 18:48
What do you mean `no result`? – jdmdevdotnet Jul 08 '17 at 18:49
The problem is that $ is then undefined, which stops the whole code from running. – Brent Meeusen Jul 08 '17 at 18:50
Using jquery is overkill for this example – Skam Jul 08 '17 at 18:51
@BrentMeeusen It's undefined because you have this script in the head, and needs to be below body. Coupled with the document ready function I have here. I updated my answer. – jdmdevdotnet Jul 08 '17 at 18:52
@SeeDart Touche. Removed jQuery. – jdmdevdotnet Jul 08 '17 at 18:53
Thank you! The jQuery way of waiting for the document to load did not work, but moving the link to the body did what it had to do! – Brent Meeusen Jul 08 '17 at 18:53
I didn't realize you didn't have jQuery, so now it's just using javascript pure, you should wait until dom is ready anyways, good practice. – jdmdevdotnet Jul 08 '17 at 18:54
is it for a jQuery library and jQuery document also important to call them at the bottom of the body? – Brent Meeusen Jul 08 '17 at 18:59
@BrentMeeusen Whether jQuery or not, yes. Always make sure your scripts are below body. – jdmdevdotnet Jul 08 '17 at 19:00
Thanks for your help! I'll keep this in mind :) – Brent Meeusen Jul 08 '17 at 19:01

score 0 · Answer 3 · answered Jul 08 '17 at 18:51

try like this (without jQuery):

var guessTheNumber = function() {

    // var number = prompt("Tell me a number between 1 and 100.");
    var x = document.getElementById("JS1");

    x.innerHTML = Math.floor((Math.random() * 100) + 1);
}
document.addEventListener('DOMContentLoaded', function(){ 
    guessTheNumber();
}, false);

JavaScript error when function called in JavaScript, not when called in HTML

3 Answers3