Question

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

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

当用户点击一个名为“Play”的按钮时，我希望所有单元格的背景颜色再次变回浅蓝色;

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

这是错误消息：

未捕获的TypeError：无法设置未定义的属性'backgroundColor'

即使我用document.getElementsByTagName（“td”）替换x;它不起作用

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

我假设您在浏览器中运行此操作，这是您的整个代码。问题在于：您尝试从DOM中读取内容，但是，在您尝试从中读取DOM时，您的DOM可能无法完全加载。

虽然这很容易解决：在您的HTML中：

<body onload="start();"></body>

在您的JS代码中：

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';
}

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


  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);
          }
      };
  }
}

这将确保在加载整个DOM时执行所有读取/执行操作。

如果您未在浏览器中运行代码，请在问题中提供更多详细信息。

Answer 2

该函数返回一个节点列表，即使只有一个

使用document.getElementsByTagName("td")[0].style.color= 'lightblue';

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

<强> fiddle

Answer 3

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

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

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

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

Answer 4

如果该行

var x = document.getElementsByTagName("td");

在<table>之前，执行该行时该元素将不存在。

确保您在HTML文档的末尾添加脚本，否则它将返回一个空数组（请注意该函数名为“get element s ”标签名称“，复数形式。”

Answer 5

我猜是因为初始化变量的代码实际上从未被调用过。尝试如下（你需要jQuery）：

$('document').ready(function(){
    var tabel = document.getElementById("slagveld");
    var x = document.getElementsByTagName("td");
    var gekozenVakken = [];
    var hit = 0;
    var pogingen = 0;
});

这样，只要将DOM加载到浏览器中，变量就会被初始化。

Answer 6

getElementsByTagName返回名称为＆＃34; td＆＃34;的元素列表。并且您没有属性backgroundColor作为元素列表，您必须使用像foreach这样的函数。

       Array.prototype.forEach.call(x, function(el, i){
           el.style.backgroundColor = 'yellow';
       });

每个元素都在＆＃34; x＆＃34;将背景色为黄色。

Answer 7

您正在寻找document.getElementById

为什么我的变量“未定义”

7 个答案: