Js变量定义后在IE中未定义答案

【问题标题】：Js variables are undefined in IE after definitionJs变量定义后在IE中未定义
【发布时间】：2015-11-23 06:30:22
【问题描述】：

我的 javascript 代码似乎可以在 Chrome、Firefox 和 Safari 上运行，但由于某些变量“未定义”而无法在 IE 中运行，但是如果您查看我的代码，您会看到变量被正确分配价值。我觉得这与定义它们的范围有关，但我不想在尝试修复 IE 时破坏其他浏览器的代码。这个问题出现在IE11和IE8，但是我没有测试过其他版本的IE来验证。

function resizeCommentBox(obj,i){
    var lastItemCounter = obj[i].getElementsByTagName('tr').length - 1;
    var lastRow = obj[i].getElementsByTagName('tr')[lastItemCounter];
    var nextCommentBox = obj[i+1].getElementsByTagName('table')[0];

    console.log("lastRow.parentElement right outside the first conditional if(obj[i].offsetHeight < obj[i].scrollHeight): ");
    console.log(lastRow.parentElement);

    if(obj[i].offsetHeight < obj[i].scrollHeight){
        if( !(i+2 < obj.length) ){
            var template = document.getElementById('lastPageTemplate');
            var parentNode = template.parentNode;

            template.style.display="block";
            template.removeAttribute("id");

            parentNode.innerHTML = parentNode.innerHTML + template.outerHTML;
            parentNode.children[parentNode.children.length-1].setAttribute('id','lastPageTemplate');
            parentNode.children[parentNode.children.length-1].style.display="none";
            parentNode.children[parentNode.children.length-1].innerHTML = parentNode.children[parentNode.children.length-1].innerHTML;

        }

        console.log("lastRow.parentElement right outside the conditional if(lastRow.childElementCount > 0): ");
        console.log(lastRow.parentElement);
        if(lastRow.childElementCount > 0){
            nextCommentBox.innerHTML = lastRow.outerHTML + nextCommentBox.innerHTML;
            lastRow.parentElement.removeChild(lastRow);
        }
        else{
            lastRow.parentElement.removeChild(lastRow);
        }

            if(nextCommentBox.getElementsByTagName('tr')[nextCommentBox.getElementsByTagName('tr').length-1].innerHTML === ""){
                nextCommentBox.getElementsByTagName('tr')[nextCommentBox.getElementsByTagName('tr').length-1].parentElement.removeChild(nextCommentBox.getElementsByTagName('tr')[nextCommentBox.getElementsByTagName('tr').length-1]);
            }


        resizeCommentBox(obj,i);
    }
    else{
        try{
            var lastPageOnlyFooter = document.getElementsByClassName('keepOnLastPageOnly');
            for(var j = 0; j < lastPageOnlyFooter.length - 2; j++){
                lastPageOnlyFooter[j].parentElement.removeChild(lastPageOnlyFooter[j]);
            }
        }
        catch(err){
            console.log(err);
        }
        return false;
    }
}

function checkCommenBox(elementCounter){

    var commentBoxCollection = document.getElementsByClassName('comments');
    resizeCommentBox(commentBoxCollection,elementCounter);
    commentBoxCollection[elementCounter].style.height = "auto";

    if(elementCounter < commentBoxCollection.length){
        checkCommenBox(elementCounter + 1);
    }

}

checkCommenBox(0);

一直失败的变量是 lastRow 和 nextCommentBox，但它们是在函数开头定义的。我现在还不能理解的是为什么它可以在许多浏览器上运行但 IE 找不到变量？感谢您的帮助和建议。

于 2015 年 8 月 31 日编辑
我截取了一些 IE 控制台的屏幕截图以显示确切的错误。如您所见，remove 方法没有被调用，因为引用为空。在这种情况下，调用的引用是变量 lastRow，它是一个表格行元素。

检查我的代码，我们发现第一个 removeChild 函数在确实存在的 lastRow.parentElement 上被调用：

lastRow.parentElement.removeChild(lastRow);

在条件之外和调用 removeChild 函数之前执行 console.logs，我们看到元素指针消失了。

我在 appendChild 和 removeChild 函数的表引用上切换了 innerHTML，但这在 IE 上仍然失败。

【问题讨论】：

elementCounter 用作从零开始的索引。但是您将它与基于长度的长度进行比较。当到达最后一个元素时，仍然满足 if 条件，并且您正在使用未定义的索引（超出范围）调用 checkCommenBox。这发生在所有浏览器中。

标签： javascript internet-explorer dom cross-browser

【解决方案1】：

我通过脚本在控制台中执行了一些日志来解决问题。似乎以下行使变量 lastRow 为空：

parentNode.innerHTML = parentNode.innerHTML + template.outerHTML;

在前面提到的行之前，lastRow 有一个元素对象作为值。行执行后，lastRow 值变为空（仅在 IE 上）。为了解决这个问题，我不得不更改 parentNode.innerHTML 以在 template.cloneNode(true) 上使用 appendChild。

parentNode.appendChild(template.cloneNode(true));

然后我移动了一些其他函数以使我的代码像以前一样工作。

【讨论】：

【解决方案2】：

我不确定您在此处尝试做什么，但不建议在 IE 浏览器上使用 innerHTML 和 outerHTML 属性，因为它仅“几乎”受支持，尤其是在表格内。请参阅http://www.quirksmode.org/dom/html/ 并尝试以这种方式进行挖掘。

【讨论】：