javascript - 为什么我的变量是 "undefined"

Question

我是 Javascript 新手，我正在构建我的第一个简单游戏“战舰”。现在我有一个非常令人沮丧的问题。

我在全局范围内声明了一个变量，但我似乎无法在我的程序中使用它。如果我这样做 console.log(x);它说变量未定义。

当用户单击名为“播放”的按钮时，我希望所有单元格的背景颜色再次变回浅蓝色；

function playGame() {
  x.style.backgroundColor = 'lightblue';
}

这是错误消息:

未捕获类型错误:无法设置未定义的属性“backgroundColor”

即使我将 x 替换为 document.getElementsByTagName("td");它不起作用

var tabel = document.getElementById("slagveld");
var x = document.getElementsByTagName("td");
var gekozenVakken = [];
var hit = 0;
var pogingen = 0;

function reset() {
    location.reload();
}

function veranderKleur(geklikteCel) {
  if (gekozenVakken.length < 3) {
        geklikteCel.style.backgroundColor = 'yellow';
        gekozenVakken.push(parseInt(geklikteCel.innerHTML));
    }
    if (gekozenVakken.length === 3) {
         alert("guess the position of the ship.");
      }
}

function playGame() {
  geklikteCel.style.backgroundColor = 'lightblue';
}


for (var i = 0; i < tabel.rows.length; i++) {
    for (var j = 0; j < tabel.rows[i].cells.length; j++) {
        tabel.rows[i].cells[j].onclick = function() {
            veranderKleur(this);
        }
    };
} 

希望有人能帮助我。

Answer 1

GetElementsByTagName() 返回一个对象数组，即使只有 1 个对象带有该标记。由于数组本身没有 .style 属性，因此在访问 .style 的子成员时会收到“未定义”消息。

您需要从该数组中选择一个元素才能访问其属性:

x[0].style.backgroundColor = 'lightblue';

使用[]方括号可以访问数组的任何元素。在我的示例中，我们正在访问第一个元素(位于索引 0 处)。您需要哪个元素由您决定。