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

Why are my variables "undefined"

本文关键字：未定义 我的 变量 为什么      更新时间：2023-09-26

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

我希望有人能帮我。

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

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

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

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

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

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

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

小提琴

如果行

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

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

请确保在HTML文档的末尾添加脚本，否则它将返回一个空的数组（请注意，该函数被称为"get-elementsby tag-name"，复数形式）。

我假设您正在浏览器中运行此程序，这就是您的全部代码。这里的问题是：您试图从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时执行所有的读取/执行。

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

我想这是因为初始化变量的代码从未真正被调用过。试着按如下方式进行（您需要jQuery）：

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

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

getElementsByTagName返回一个名为"td"的元素列表，并且元素列表没有属性backgroundColor，必须使用foreach之类的函数。

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

"x"中的每个元素的背景色都是黄色。

您正在查找document.getElementById

相关文章：