Javascript does not continue after adding stylesheet to a class

Question

I want to display a div container if the device has a special width. I made a simple if-condition and it is working well.

I wanted to add a second function to my code and the function was not called. After trying out I saw that the code stops after the document.getElementyById-Code.

If the alert("Hello World") is called in the if-condition before the getElementById, it is called. If it is called in the if-condition after the getElementById, it is not called anymore.

Why is the progress stuck there?

The console output: [Error] TypeError: null is not an object (evaluating 'document.getElementById("whitecontainer").style') setHeightandWidth (-Link deleted-, line 402) onresize (-Link deleted-, line 382)

but the object cannot be null, because the style change does work, it is just stuck after doing the resize.

Thanks for help!

function setHeightandWidth() {
    var body = document.body,
        html = document.documentElement;

    var height = (Math.max(body.scrollHeight, body.offsetHeight,
                           html.clientHeight, html.scrollHeight, html.offsetHeight) - 75 - 248);

    var width = document.body.clientWidth;

    if (width < 1199) {
        document.getElementById("whitecontainer").style.display = "none";

        alert("Hello World!");

    }

    if (width >= 1199) {
        width = 1140;
        document.getElementById("whitecontainer").style.display = "inherit";
    }

    var white_container = document.getElementById("whitecontainer");
    white_container.style.height = height + "px";
    white_container.style.width = width + "px";

}

The code like it is there is not displaying Hello World. If I put the alert("Hello World!") above the document.getElementById, it displays Hello World. — Skalibran
– Skalibran, Commented May 22, 2015 at 12:43
Have you looked at console output? if you don't have an element with id == whitecontainer, then you would get an uncaught exception with this line: document.getElementById("whitecontainer").style.display = "none"; — Mike Atkins
– Mike Atkins, Commented May 22, 2015 at 12:45

MyTwoCents · Accepted Answer · 2015-05-22 12:51:00Z

1

Problem is in this line

document.getElementById("whitecontainer").style.display

javascript is unable to find id "whitecontainer" tat's why it throws an null exception and script breaks

answered May 22, 2015 at 12:51

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skalibran Over a year ago

Seems exactly like this, but the code you mentioned above is working.

steve · Accepted Answer · 2015-05-22 12:52:34Z

1

The alert not working probably means that the line before it caused an error.

Do the lines

white_container.style.height = height + "px";
white_container.style.width = width + "px";

Run?

I have a feeling your code fails everytime you use document. XXXXXX

'whitecontainer' is probably not a real element

edited May 22, 2015 at 12:52

answered May 22, 2015 at 12:44

steve

1511 silver badge10 bronze badges

3 Comments

Skalibran Over a year ago

Yes, that is the last thing that is working. After that the code is stuck, so I'm not able to change anything else using my javascript.

steve Over a year ago

Wait do you mean that white_container.style.height = height + "px"; white_container.style.width = width + "px"; IS running?

Skalibran Over a year ago

exactly. The console throws out a null-exception for whitecontainer anyway. EDIT: NO, it is not. I just checked it again and now it is not working anymore, but the code you mentioned should run without problems if not stuck. I use it in some projects.

Collectives™ on Stack Overflow

Javascript does not continue after adding stylesheet to a class

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related