Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript does not continue after adding stylesheet to a class

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";

}
like image 379
Skalibran Avatar asked May 22 '15 12:05

Skalibran


2 Answers

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

like image 72
MyTwoCents Avatar answered Oct 18 '22 16:10

MyTwoCents


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

like image 41
steve Avatar answered Oct 18 '22 16:10

steve