Question

我正在尝试使用JS构建一个色彩猜谜游戏。我使用了一个带有初始颜色列表的颜色数组。到目前为止，整个代码一直有效，直到我尝试使用当前颜色单击每个方块时显示警报。

在控制台中我收到错误：

未捕获的TypeError：无法读取未定义的属性“样式” 在HTMLDivElement。（color_game.js：25）

第25行指出：

var clickedColor = squares[i].style.background;

在这里，我试图引用数组中每个方块的样式。（请看下面的src）

它表示在进一步检查时未定义。

我的完整代码如下： HTML：

<body>

  <h1>The Great <span id="colorDisp">RGB</span> Guessing Game</h1>
  <div id="container">
    <div class="square">

    </div>
    <div class="square">

    </div>
    <div class="square">

    </div>
    <div class="square">

    </div>
    <div class="square">

    </div>
    <div class="square">

    </div>
  </div>

  <script src="color_game.js" type="text/javascript"></script>

</body>

JavaScript代码：

var colorArr = [
  "rgb(255, 0, 0)",
  "rgb(255, 255, 0)",
  "rgb(0, 255, 0)",
  "rgb(0, 255, 255)",
  "rgb(0, 0, 255)",
  "rgb(255, 0, 255)"
];

var squares = document.querySelectorAll(".square");
var pickedColor = colorArr[3];
var colorDisp = document.getElementById("colorDisp");
colorDisp.innerHTML = pickedColor;

for (var i = 0; i < squares.length; i++) {
  squares[i].style.background = colorArr[i];

  squares[i].addEventListener("click", function() {

    var clickedColor = squares[i].style.background;
    alert(clickedColor);

    if (clickedColor === pickedColor) {
      alert("CORRECT");
    } else {
      alert("WRONG COLOR!!!");
    }

  });
}

我试过这两行，但我的代码没有执行：

var clickedColor = squares[i].style.background;

和

var clickedColor = this.style.background;

有人能指出我如何在JS中访问数组的样式元素吗？

Answer 1

我做了2次小改动，对我有用。

修改了HTML部分，为<div>添加了一些文字。 e.g。

   <div id="container">
        <div class="square">
            A
        </div>
        <div class="square">
            B
        </div>
        <div class="square">
            C
        </div>
        <div class="square">
            D
        </div>
        <div class="square">
            E
        </div>
        <div class="square">
            F
        </div>
    </div>

然后修改了行

var clickedColor = squares[i].style.background;

到

var clickedColor = this.style.background;

现在它对我来说正常。

Answer 2

使用该事件获取目标元素。

squares[i].addEventListener("click", function(e) {

  var clickedColor = e.target.style.background;
  alert(clickedColor);

  if (clickedColor === pickedColor) {
    alert("CORRECT");
  } else {
    alert("WRONG COLOR!!!");
  }

});

访问JavaScript错误的单个样式元素

2 个答案: