I have several functions running in my main js file and after I added two lines to one of them, this error appears. The odd thing is, the error references a variable in one of the other functions which is entirely unrelated to the one being called.

Here is the function that I changed:

window.onresize = function(){
    var timeOut = null;
    if(timeOut != null) clearTimeout(timeOut);
        setTimeout(expandWrapper, 500);
}

var expandWrapper = function(){ 
    //var eContent = document.getElementById("content");
    var eContent = document.getElementById("main-content");
    var eMainContent = document.getElementById("column-1");
    var elayoutArea = document.getElementById("layout-column_column-1");
    var eFooter = document.getElementById("footer");
    //var dScrollb = $(".dataTables_scrollBody");
    var leftWrapper = document.getElementById("left-links-wrapper");
    var contentEnd = eMainContent.clientHeight + eMainContent.offsetTop;

    if(document.documentElement.clientHeight >= (eContent.offsetTop  + elayoutArea.clientHeight + eFooter.clientHeight)){       
        eMainContent.style.height = document.documentElement.clientHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
        added line--> leftWrapper.style.height = document.documentElement.clientHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
        //console.log("primary condition");
    } else {
        eMainContent.style.height = ($(window).height()); //elayoutArea.clientHeight + "px";
        added line-->leftWrapper.style.height = eMainContent.offsetHeight + "px";
        //console.log("fallback");
    }   
}

I've pointed out the two added lines, located in the if statement and beginning with "leftWrapper.style.height". Incidentally, while eMainContent element appears on all pages, leftWrapper element only appears on certain pages and the error appears only on those page where leftWrapper does not exist.

I'm thinking this is where the problem lies: the javascript flips out because it can't perform the action I've requested on an element that does not exist on a particular page.

Assuming this is the problem, how could I rewrite this to alleviate this error but modify leftWrapper on the pages where it exists?

I have several functions running in my main js file and after I added two lines to one of them, this error appears. The odd thing is, the error references a variable in one of the other functions which is entirely unrelated to the one being called.

Here is the function that I changed:

window.onresize = function(){
    var timeOut = null;
    if(timeOut != null) clearTimeout(timeOut);
        setTimeout(expandWrapper, 500);
}

var expandWrapper = function(){ 
    //var eContent = document.getElementById("content");
    var eContent = document.getElementById("main-content");
    var eMainContent = document.getElementById("column-1");
    var elayoutArea = document.getElementById("layout-column_column-1");
    var eFooter = document.getElementById("footer");
    //var dScrollb = $(".dataTables_scrollBody");
    var leftWrapper = document.getElementById("left-links-wrapper");
    var contentEnd = eMainContent.clientHeight + eMainContent.offsetTop;

    if(document.documentElement.clientHeight >= (eContent.offsetTop  + elayoutArea.clientHeight + eFooter.clientHeight)){       
        eMainContent.style.height = document.documentElement.clientHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
        added line--> leftWrapper.style.height = document.documentElement.clientHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
        //console.log("primary condition");
    } else {
        eMainContent.style.height = ($(window).height()); //elayoutArea.clientHeight + "px";
        added line-->leftWrapper.style.height = eMainContent.offsetHeight + "px";
        //console.log("fallback");
    }   
}

I've pointed out the two added lines, located in the if statement and beginning with "leftWrapper.style.height". Incidentally, while eMainContent element appears on all pages, leftWrapper element only appears on certain pages and the error appears only on those page where leftWrapper does not exist.

I'm thinking this is where the problem lies: the javascript flips out because it can't perform the action I've requested on an element that does not exist on a particular page.

Assuming this is the problem, how could I rewrite this to alleviate this error but modify leftWrapper on the pages where it exists?

• javascript
• jquery
• html
• css

• 2 Not related to the lines you added, but that timeOut variable isn't doing what you probably think it is: you need to move the var timeOut = null declaration outside the function because as it is it is local and gets rest every time the function runs, and then you need to set the variable to a non-null value with timeOut=setTimeout(expandWrapper, 500);. And set timeOut = null inside the expandWrapper() function. (I'm assuming the point is to avoid calling expandWrapper() until after the user has stopped resizing for half a second.) – nnnnnn Commented Nov 9, 2012 at 7:47

2 Answers 2

The problem, as you point out, is that calling getElementById will return null if you pass in an identifier not present in the DOM.

For cases like these where you're working with an object that could be null or undefined, you can simply do the following:

if (possiblyNullOrUndefinedVariable) {
  possiblyNullOrUndefinedVariable.doSomething();
}

This could also be shortened to:

possiblyNullOrUndefinedVariable && possiblyNullOrUndefinedVariable.doSomething();

taking advantage of the short-circuiting of the && operator.

One caveat worth noting is that this won't behave as you'd expect for all variables. 0 and '' are also falsey values. If you know you'll be dealing with strings or numbers, you can instead do something like:

if (possiblyNullOrUndefinedVariable != null && possiblyNullOrUndefinedVariable != undefined) {
  possiblyNullOrUndefinedVariable.doSomething();
}

Why are you mixing jQuery and dom? that is very confusing.

Can you try

var timeOut = null;
window.onresize = function(){
  clearTimeout(timeOut); // can always be done
  timeOut=setTimeout(expandWrapper, 500);
}

var expandWrapper = function(){ 
    var eContent = $("#main-content");
    var eMainContent = $("#column-1");
    var elayoutArea = $("#layout-column_column-1");
    var eFooter = $("#footer");
    var leftWrapper = $("#left-links-wrapper");
    var docHeight = $(document).height();
    var contentEnd = eMainContent.height() + eMainContent.offset().top;
    if(docHeight >= (eContent.offset().top  + elayoutArea.height() + eFooter.height())){       
            eMainContent.height(docHeight - eContent.offset().top - eFooter.height() -1);
        leftWrapper.height() = docHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
            //console.log("primary condition");
        } else {
            eMainContent.height(($(window).height()); 
            leftWrapper.height(eMainContent.height);
            //console.log("fallback");
        }   
    }