我在 JavaScript 中收到错误 "cannot read property 'innerHTML' of undefined"。请帮忙！我是 JS 的新手。代码附在下面。谢谢

Question

我在 js（附加代码）的第 42 行收到此错误。请帮忙。我是js新手

let nums = document.getElementsByClassName("grid-items");
var i = 0,
  num = 0;
for (i = 0; i < nums.length; i++) {
  console.log(nums[i]);
  nums[i].addEventListener("click", function() {
    num = nums[i].innerHTML;
    console.log(num);
  })
}

<button class="grid-items" id="number0">0</button>
<button class="grid-items" id="number1">1</button>
<button class="grid-items" id="number2">2</button>
<button class="grid-items" id="number3">3</button>
<button class="grid-items" id="number4">4</button>
<button class="grid-items" id="number5">5</button>
<button class="grid-items" id="number6">6</button>
<button class="grid-items" id="number7">7</button>
<button class="grid-items" id="number8">8</button>
<button class="grid-items" id="number9">9</button>

此外，如果有人对点击时从 js 打印数字有更好的想法，您可以提供帮助。谢谢!!!!

Answer 1

你可以使用这个：

let nums=document.getElementsByClassName("grid-items");
var i=0,num=0;
for(i=0;i<nums.length;i++){
    console.log(nums[i]);
    nums[i].addEventListener("click", function (){
        num=this.innerHTML;
        console.log(num);
    })    
}

Answer 2

您可以使用 forEach 循环来最小化代码并使其更简洁。

参见 =>

let nums = document.querySelectorAll(".grid-items");
nums.forEach(element =>{
   element.onclick = (e)=>{
     console.log(parseInt(element.textContent))
   }})

Note : I used parseInt() method to parse integer from the string returned by .innerText

Answer 3

您的点击处理程序使用全局范围内的变量 i，并且在点击时刻（当循环完成时）此变量指向数组边界后面，这会导致异常。

但是如果您将变量 i 设置为循环体的局部变量，那么每个处理程序都会有自己的 i 实例，每个迭代都有一个特定的值。

let nums = document.getElementsByClassName("grid-items")
for (let i = 0; i < nums.length; i++) {
  nums[i].addEventListener("click", function() {
    console.log(nums[i].innerHTML)
  })
}

<button class="grid-items" id="number0">0</button>
<button class="grid-items" id="number1">1</button>
<button class="grid-items" id="number2">2</button>
<button class="grid-items" id="number3">3</button>
<button class="grid-items" id="number4">4</button>
<button class="grid-items" id="number5">5</button>
<button class="grid-items" id="number6">6</button>
<button class="grid-items" id="number7">7</button>
<button class="grid-items" id="number8">8</button>
<button class="grid-items" id="number9">9</button>

请注意使用 let 而不是 var，因为 var 具有更广的范围并且不会是循环局部的。

我在 JavaScript 中收到错误 "cannot read property 'innerHTML' of undefined"。请帮忙！我是 JS 的新手。代码附在下面。谢谢

I am getting the error "cannot read property 'innerHTML' of undefined" in JavaScript. Please help! I am new to JS. Code is attached below. Thanks

javascript

undefined