Question

我尝试使用javascript制作othello，并尝试通过更改图块颜色为用户提供提示但是每次用户单击和调用功能都会找到放置磁盘的适当位置
当它触发功能ifgreen()时出现错误

无法读取未定义的属性“ classList”

但是当我console.log类时，我可以看到实际的div类，它将颜色从绿色更改为greenwhite 我的代码有什么问题？

这是因为在窗口加载时我添加了“ <div class='green "+i+j+"' onclick='clickfunc("+i+","+j+");'></div>”吗？

var t = 0;

function ifgreen(i, j) {
  var butu = "'green " + i + j + "'";
  var y = document.getElementsByClassName(butu); //error
  y[0].classList.toggle("greenwhite"); //error
  y[0].classList.toggle("green");

}


function find() {
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      if (ban[i][j] == player) {
        hint(i, j);
      }
    }
  }
}

用户单击其中一个绿色部分时的功能

function clickfunc(i, j) {
  console.log(i, j);
  find();
  if (ban[i][j] === 0 && player === 1 && checkblack(i, j, 1, 1) >= 1) {
    console.log(checkblack(i, j, 2));
    document.getElementById("status").innerHTML = "Black turn";
    ban[i][j] = 1;
    player = 2;
    checkk(i, j);

    a();
  }
}

绘制othello表的功能

function a() {
  document.getElementById("bann").innerHTML = "";

  for (i = 0; i < ban.length; i++) {
    for (j = 0; j < ban[i].length; j++) {

      if (ban[i][j] === 0)
        document.getElementById("bann").innerHTML += "<div class = 'green "+i+j+"' onclick = 'clickfunc("+i+","+j+");' > < /div>";
      else if (ban[i][j] === 1)
        document.getElementById("bann").innerHTML += "<div class = 'banwhite "+i+j+"' onclick = 'clickfunc("+i+","+j+");' > < /div>";
      else if (ban[i][j] === 2)
        document.getElementById("bann").innerHTML += "<div class = 'banblack "+i+j+"' onclick = 'clickfunc("+i+","+j+");' > < /div>";
    }

    document.getElementById("bann").innerHTML += "<br>";
  }

}


window.onload = a();

这是整个程序 https://jsfiddle.net/emoawj4v/

Answer 1

> let i=1
> let j=2
> "'green "+i+j+"'"
"'green 12'"

因此必须按字面意义'green 12'调用该类，包括'引号（例如<div class="'green 12'"></div>）。显然，a函数中没有Whis。 getElementsByClassName函数找不到具有这些类名称的任何元素，结果返回空的 HTMLCollection （y[0]因此为undefined，这是您错误消息来自）。

因此，放下'应该可以解决问题：

> "green "+i+j
'green 12'

在您的代码中：

var butu = "green " + i + j; // => eg. "green 12"
var y = document.getElementsByClassName(butu)

顺便说一句，类名不能有空格-"green 12"实际上两个类（green和12）。如果您想组成一个班级名称，通常用破折号代替空格（例如green-12）。

而且，正如@epascarello指出的那样，您应该将函数引用附加到onload（和其他事件）上，而不是结果。

因此window.onload = a()（“运行a并将结果分配给window.onload”）实际上应该只是window.onload = a（“ {{1时运行a }}“发生）。

无法读取JavaScript中未定义的属性“ classList”

1 个答案: