Question

我在我的主js文件中运行了几个函数，在我向其中一个添加了两行之后，出现了这个错误。奇怪的是，错误引用了其他一个函数中的变量，这个函数与被调用函数完全无关。

这是我改变的功能：

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

我已经指出了两个添加的行，位于if语句中并以“leftWrapper.style.height”开头。顺便提一下，虽然eMainContent元素出现在所有页面上，但leftWrapper元素仅出现在某些页面上，并且错误仅出现在leftWrapper不存在的页面上。

我认为这就是问题所在：javascript翻转，因为它无法执行我在特定页面上不存在的元素上请求的操作。

假设这是问题，我怎么能重写这个来缓解这个错误，但是在它存在的页面上修改leftWrapper？

Answer 1

为什么要混合使用jQuery和dom？这非常令人困惑。

你能试试吗

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

Answer 2

正如您所指出的，问题是如果您传入DOM中不存在的标识符，则调用getElementById将返回null。

对于像这样的情况，您正在使用可能为null或未定义的对象，您可以简单地执行以下操作：

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

这也可以缩短为：

possiblyNullOrUndefinedVariable && possiblyNullOrUndefinedVariable.doSomething();

利用&&运营商的短路。

值得注意的一点是，这不会像你对所有变量的期望那样表现。 0和''也是假名值。如果你知道你将处理字符串或数字，你可以改为：

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

TypeError：d为null

2 个答案: