Variables in JavaScript: An error arrives

Question

When I am starting my website, the JavaScript does not work. Safari gives an error:

TypeError: 'null' is not an object (evaluating 'document.getElementById("aktuell").innerHTML')

This is my JavaScript-code:

<script>
var aktueller = document.getElementById("aktuell").innerHTML;
function go() {
    neu = aktueller - 1;
    document.getElementById("aktuell").innerHTML = neu;
    if (neu == 1) {
        document.getElementById("zweite").style.display = 'none';
        document.getElementById("dritte").style.display = 'none';
    }
    else if (neu == 2) {
        document.getElementById("dritte").style.display = 'none';
    }
    else if (neu == 0) {
        document.getElementById("erste").style.display = 'none';
        document.getElementById("zweite").style.display = 'none';
        document.getElementById("dritte").style.display = 'none';
    }
}
</script>

And this is my used body-part:

<body>
<p id="aktuell" style="display:none;" >0</p>
<center>
    <button>Zur&uuml;ck</button><button onclick="go();">Weiter</button>
</center>
<div id="nullte"><img src="data/nullte.jpg" width="500px" /></div>
<div id="erste"><img src="data/erste.jpg" width="500px" /></div>
<div id="zweite"><img src="data/zweite.jpg" width="500px" /></div>
<div id="dritte"><img src="data/dritte.jpg" width="500px" /></div>
</body>

If your script is in the ``, the element you're looking for will not yet be part of the DOM - the browser runs the scripts immediately before proceeding to parse the rest of the HTML. You can move your script to the very end of the ``. — Pointy, Jan 24 '14 at 19:07
The JavaScript executes before the DOM is loaded, so no element with that ID exists yet. Either move your script to the bottom if the page or do everything in `window.onload`. — 11684, Jan 24 '14 at 19:08

Mehran Hatami · Answer 1 · 2014-01-25T19:22:15.557

3

you have to wait until the page is completely loaded:

<script>
    var aktueller = null;
    window.onload = function(){
        aktueller = document.getElementById("aktuell").innerHTML;
    }
    function go() {
        //....
    }
</script>

you can also do it like:

var aktueller = null;
window.addEventListener("load", function(){
    aktueller = document.getElementById("aktuell").innerHTML;
});

the other option is to use onload event on body tag:

<head>
<script type='text/javascript'>
    var aktueller = null;
    function init(){
        aktueller = document.getElementById("aktuell").innerHTML;
    }
    function go(){
        //...
    }
</script>
</head>
<body onload="init();">
</body>

although if you use jquery you have other options like:

var aktueller = null;
$(document).ready(function(){
    aktueller = $("#aktuell").html();
});

edited Jan 25 '14 at 19:22

answered Jan 24 '14 at 19:10

Mehran Hatami

12,723
6
28
35

3

Why use jQuery to wait until the DOM is ready, but not to select the relevant elements? – 11684 Jan 24 '14 at 19:13
I myself usually do my stuff with vanilla JavaScript, but I wanted to mention all the options. – Mehran Hatami Jan 24 '14 at 19:16
Then why not `$("#aktuell").html();`? – 11684 Jan 25 '14 at 19:08

Adrian Marinica · Answer 2 · 2014-01-24T19:15:59.287

0

When the script is evaluated, the Body is not yet built. You need to place the script and the end of the body, or put it inside of a document ready section, by using jQuery.

 $(document).ready(function() { 
    var aktueller = document.getElementById("aktuell").innerHTML;
    /* more code goes here */ 
 });

More info here.

Why I would avoid using window.onload here.

edited Jan 24 '14 at 19:15

answered Jan 24 '14 at 19:09

Adrian Marinica

2,191
5
29
53

Uhm, no JQuery tag present and since this can be done with vanilla JavaScript (obviously, since jQuery is built in vanilla JavaScript) easily, I don't see a reason to include jQuery just for this. – 11684 Jan 24 '14 at 19:11
1

I don't understand the -1. I offered a plain JavaScript solution (moving the script to the end of the body). Also, I offered a better alternative, by using jQuery. I think the -1 is not correct (the answer is related to the question and is useful). – Adrian Marinica Jan 24 '14 at 19:13
Okay, I agree. I removed my -1. – 11684 Jan 24 '14 at 19:14

Variables in JavaScript: An error arrives

2 Answers2