JavaScript抛出TypeError表示我的变量未定义

I don't have much experience in JavaScript, so far I have this:

我没有很多JavaScript经验,到目前为止我有这个:

  function loop() {
    var authorDivs = document.getElementById('ctl00_MainContent_MCPObjectInfo_dvCreatorView').getElementsByTagName("div");

    for (var i = 0; i < authorDivs.length; i++) {
        var divOfDiv = authorDivs[i].getElementsByTagName("div");

        if (typeof divOfDiv.item(i) === 'undefined' || divOfDiv.item(i) === null) {
            console.log("This is undefined or null");
        }
        else {
            var realDivs = divOfDiv.item(i);
            realDivs.item(i).textContent = "please work plz";
        }
    }
}

I get the following error from the console in FireFox: TypeError: realDivs is undefined on this line: realDivs.item(i).innerHTML = "please work plz";

我在FireFox中从控制台收到以下错误:TypeError:realDivs在此行未定义:realDivs.item(i).innerHTML =“please work plz”;

Essentially what I have (in my mind) is a loop that goes through authorDivs and gets all of the divs within those divs and saves them in divOfDiv. I then check to see if the divs in divOfDiv are undefined or null, if they are not then those divs get saved in a variable realDivs which I then use to edit the innerHTML. That's what I'd ideally like to see happen, what is causing the error? What am I doing wrong?

基本上我拥有(在我的脑海中)是一个循环,通过authorDivs并获取这些div中的所有div并将它们保存在divOfDiv中。然后我检查divOfDiv中的div是未定义的还是null,如果它们不是那么那些div被保存在变量realDivs中,然后我用它来编辑innerHTML。这就是我理想情况下想要发生的事情,导致错误的原因是什么?我究竟做错了什么?

Note: I do not have access to jQuery but only JavaScript.

注意:我无法访问jQuery,只能访问JavaScript。

Edit: I've added the changes suggested below and its fixed that -- thanks! But I'm now getting the following error: TypeError: realDivs.item is not a function

编辑:我已经添加了下面建议的更改并修复了 - 谢谢!但我现在收到以下错误:TypeError:realDivs.item不是一个函数

What is causing that? And on another note how do I know when I'm dealing with an array and when I'm dealing with an HTMLCollection? Do you just assume? I've never used a loosely typed language before so its new to me.

是什么造成的?另外注意我怎么知道我什么时候处理数组以及何时处理HTMLCollection?你只是假设?我从来没有使用过松散类型的语言,所以它对我来说是新的。

3 个解决方案

#1

Well, you'll need to move that code inside the conditional block that is supposed to prevent it! Also, || "null" is not going to work as you expect, you'll need to check for || divOfDiv.item(i) === null explicitly.

好吧,你需要将该代码移动到应该阻止它的条件块中!另外,|| “null”不能按预期工作,你需要检查|| divOfDiv.item(i)=== null显式。

So try

for (var i = 0; i < authorDivs.length; i++) {
    var divOfDiv = authorDivs[i].getElementsByTagName("div");

    if (divOfDiv.item(i) == null) {
        console.log("This is undefined or null");
    } else {
        var realDivs = divOfDiv.item(i)
        realDivs.item(i).innerHTML = "please work plz";
        console.log(divOfDiv.item(i));
    }
}

However, that still doesn't really work for two reasons:

但是,由于两个原因,这仍然无法正常工作:

The i index you use to access the i-th divOfDiv comes from the iteration over authorDivs - hardly what you want. Instead, use a second loop over all divOfDivs.

用于访问第i个divOfDiv的i索引来自于对authorDivs的迭代 - 几乎不是你想要的。相反,在所有divOfDivs上使用第二个循环。

Your realDivs variable does hold a single <div>, which does not have an .item method. You'd just directly access its .innerHTML property.

你的realDivs变量确实包含一个

,它没有.item方法。您只需直接访问其.innerHTML属性即可。

So you should use

所以你应该使用

var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
for (var i=0; i<authorDivs.length; i++) {
    var divsOfDiv = authorDivs.item(i).getElementsByTagName("div");

    for (var j=0; j<divsOfDiv.length; j++) {
        var realDiv = divsOfDiv.item(j);
        realDiv.innerHTML = "please work plz";
        console.log(realDiv);
    }
}

#2

it will happen in case when your if (typeof divOfDiv.item(i) === 'undefined' || 'null') returns true. Then you never initialize realDivs (what would happen if condition was falsy). Later you try to call item function on that unitialized object

如果你的if(typeof divOfDiv.item(i)==='undefined'||'null')返回true,就会发生这种情况。然后你永远不会初始化realDivs(如果条件是假的会发生什么)。稍后您尝试在该单元化对象上调用item函数

#3

There are two problems in the code.

代码中有两个问题。

comparing DOM object with 'undefined' and null. If div tag is not available in authorDivs[i], it will return empty DOM array. So, comparision of empty DOM array with undefined and null is not good approach. We can use array length property for doing validation.

比较DOM对象与'undefined'和null。如果authorDivs [i]中没有div标签,它将返回空DOM数组。因此,将空DOM数组与undefined和null进行比较并不是一个好方法。我们可以使用数组长度属性进行验证。

divOfDiv = authorDivs[i].getElementsByTagName("div");
if(divOfDiv.length > 0) { console statement}

divOfDiv = authorDivs [i] .getElementsByTagName(“div”); if(divOfDiv.length> 0){console statement}
As item(i) is already return single DOM element, item(i) of "realDivs" variable is not proper approach. In addition to this, innerHTML method needs to be used after validating whether realDivs contains DOM element. Please update the code as below.

由于项目(i)已经返回单个DOM元素,因此“realDivs”变量的项目(i)不是正确的方法。除此之外,在验证realDivs是否包含DOM元素之后,还需要使用innerHTML方法。请更新以下代码。

var realDivs = divOfDiv.item(i); realDivs ? (realDivs.innerHTML = "please work plz"): null;

var realDivs = divOfDiv.item(i); realDivs? (realDivs.innerHTML =“please work plz”):null;

Note : item(i) will return null if DOM is not available.

注意:如果DOM不可用,item(i)将返回null。

#1