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?
Share Improve this question edited Nov 9, 2012 at 7:59 James Cazzetta 3,2206 gold badges36 silver badges55 bronze badges asked Nov 9, 2012 at 7:42 max7max7 7982 gold badges16 silver badges37 bronze badges 1-
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 thevar 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 withtimeOut=setTimeout(expandWrapper, 500);
. And settimeOut = null
inside theexpandWrapper()
function. (I'm assuming the point is to avoid callingexpandWrapper()
until after the user has stopped resizing for half a second.) – nnnnnn Commented Nov 9, 2012 at 7:47
2 Answers
Reset to default 3The 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");
}
}