js变量定义后在IE中未定义

Question

我有 javascript 代码似乎可以在 Chrome、Firefox 和 Safari 上运行，但由于某些变量 "undefined" 而无法在 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，它是一个 table 行元素。

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

lastRow.parentElement.removeChild(lastRow);

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

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

Answer 1

我不确定您在这里要做什么，但不建议在 IE 浏览器上使用 innerHTML 和 outerHTML 属性，因为它仅 "almost" 受支持，尤其是在表格内。见http://www.quirksmode.org/dom/html/并尝试这样挖掘。

Answer 2

我通过脚本在控制台中记录了一些日志，从而解决了这个问题。似乎以下行使变量 lastRow 为空：

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

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

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

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

js变量定义后在IE中未定义

Js variables are undefined in IE after definition

javascript

internet-explorer

dom

cross-browser