JavaScript-尝试从DOM元素获取信息时出现Uncaught TypeError

时间:2020-01-09 18:00:18

标签: javascript html typeerror undefined-behavior

JavaScript的新手,无法弄清我在做什么错。尝试将className元素的<div>分配给var,我收到此错误。

scripts.js:30 Uncaught TypeError: Cannot read property '0' of undefined
    at checkWinner (scripts.js:30)
    at HTMLDivElement.buttonClick (scripts.js:25)

当我尝试确定该属性是否存在时,控制台使我相信它确实存在。这对我来说似乎是矛盾的信息。

winLines [0] [0] .className

"xButt"​

感谢您的帮助。我敢肯定这是基本的东西。这是代码,以防万一。

var turns = 0;
var gameButtons = Object.values(document.querySelectorAll('.gameButton'));
var winLines= [
  [gameButtons[0], gameButtons[1], gameButtons[2]]
  /* other arrays go hear */
];

for (let i = 0; i < gameButtons.length; i++) {
  gameButtons[i].textContent = null;
  gameButtons[i].addEventListener('click', buttonClick);
}

function buttonClick(e) {    
  console.log(e.target.id + ": You clicked me!");
  if (turns % 2 == 0) {
    e.target.className = 'xButt';
    e.target.textContent = 'X';
    e.target.style.backgroundColor = 'green';
  } else {
    e.target.className = 'oButt';
    e.target.textContent = 'O';
    e.target.style.backgroundColor = 'blue';
  }
  turns++;
  checkWinner();
}

function checkWinner() {
  for (let i = 0; i <= winLines.length; i++) {
    let markOne = winLines[i][0].className;
    let markTwo = winLines[i][1].className;
    let markThree = winLines[i][2].className;
    if (markOne === markTwo && markOne === markThree) {
      alert("Awww sh********t!");
    }    
  }
}

1 个答案:

答案 0 :(得分:0)

您的循环具有比数组中包含元素更多的迭代。

像这样更改循环:

for (let i = 0; i < winLines.length; i++)

出现未定义的错误是因为您正在尝试winLines[1][0]不存在,因为winLines仅具有一个元素(索引为0)