issues with .className in javascript

Question

<script type="text/javascript">
    var appel = document.getElementById("appel");
    var Banaan = document.getElementById("Banaan");
    var Peer = document.getElementById("Peer");

    function laatZien(divID) {
      var item = document.getElementById(divID);
      if (item.className == "verstopt") {
        item.className = "zichtbaar";
      } else {
        item.className = "verstopt";
      }
      if (divID == "appel") {
        alert("hoi");
        Peer.className = "verstopt";
        Banaan.className = "verstopt";
      }
    }
</script>

On my page i have 3 pictures with 3 buttons, and when one of the buttons is pressed, one picture must appear, but the others must go away.

The id's of these pictures are: "appel", "Peer", "Banaan".

When the pictures get the class "zichtbaar" -> display: block; and when they get the class "verstopt" -> display:none;

The first if/else statement works fine: it hides when it is shown, and it shows when it is hidden.

but even though the second if-statement does get triggered(i have tested this), the other pictures dont get hidden.(pictures Peer and Banaan)

And yes i know that i still have to do the last if statement 3x for each picture ;)

You need to move the script down, below the elements, right above the `
` tag. — adeneo, Feb 13 '16 at 19:33
It's because you're using `getElementById` outside the function, and for that to work, the elements have to exist in the DOM, so they have to come before the script tag — adeneo, Feb 13 '16 at 19:37
at the time of script execution the elements are not present in the DOM yet, the browser is just loading them. another, imo even nicer solution would be to have a document ready event listener in the head. you write javascript anywhere you want then — user151496, Feb 13 '16 at 19:37
Please post your html as well, so we can see where/when your script gets called — Ason, Feb 13 '16 at 19:44
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Feb 13 '16 at 20:29

score 0 · Answer 1 · answered Feb 13 '16 at 19:49

0

function laatZien(divID) {
    var item = document.getElementById(divID);

    appel.className="verstopt";
    Banaan.className="verstopt";
    Peer.className="verstopt";

    item.className="zichtbaar";

 }

answered Feb 13 '16 at 19:49

ymranx

196
5

score 0 · Answer 2 · answered Feb 13 '16 at 20:35

You're calling getElementById at the moment when the page is still loading. Because appel peer and banaan are not yet available in the DOM the function returns null.

You can fix this by putting the script element at the bottom of the body.

You can also wrap the script in a function which gets called when the page is loaded.

Example below:

addEventListener('load', function () {
var appel = document.getElementById("appel");
var Banaan = document.getElementById("Banaan");
var Peer = document.getElementById("Peer");

function laatZien(divID) {
    var item = document.getElementById(divID);
    if (item.className == "verstopt") {
        item.className = "zichtbaar";
    } else {
        item.className = "verstopt";
    }
    if (divID == "appel") {
        alert("hoi");
        Peer.className = "verstopt";
        Banaan.className = "verstopt";
    }
}
}, false);

issues with .className in javascript

2 Answers2