为什么我的变量“undefined”

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

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

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

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

这是错误消息：

遗漏的类型错误：未定义

无法设置属性 '的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); 
     } 
    }; 
}

我希望有人能帮助我。

来源

2015-11-06 user3655364

['.getElementsByTagName（）']（https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName）返回元素列表 – Andreas

声音就像脚本在页面已完全加载。请将您的脚本放在页面的末尾或通过window.onload函数调用它。 – jeff

GetElementsByTagName()返回对象阵列，e如果只有一个带有该标签的物体由于数组本身没有属性.style，因此访问.style的子成员时会收到'undefined'消息。

你需要从数组中选择一个元素来访问它的属性：

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

随着[]方括号可以访问数组中的元素。在我的例子中，我们正在访问第一个元素（在索引0处）。你需要哪个元素供你确定。

来源

2015-11-06 09:25:36 steenbergh

非常感谢。通过解释数组本身没有这些属性，我现在明白我需要选择数组中的元素来改变属性。 :) – user3655364

-2

您正在寻找document.getElementById

来源

2015-11-06 09:22:48 alok

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

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

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

fiddle

来源

2015-11-06 09:24:47

非常感谢。它现在有效。斯坦伯格给了我一个很好的解释;我现在明白了为什么它不起作用。 – user3655364

如果线路

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

是你<table>之前，该元素将不被执行线的时候存在。

确保您在您的HTML文档的末尾添加脚本或者它会返回一个空阵列（请注意，该功能被称为“获得通过标签名称元素小号”，复数形式）。

来源

2015-11-06 09:27:15

谢谢你的回复。是;错字很容易制作。脚本标签位于主体的末尾。

– user3655364

我假设你在浏览器中运行这个，这是你的整个代码。问题在这里：你试图从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被加载。

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

来源

2015-11-06 09:27:51

这是_pure JavaScript_的方法。 @ Harry-Detsis提供了另一个依赖于JQuery的答案（另外，如果我必须采用，我选择了框架; p）。 –

谢谢你们;变量现在定义:) – user3655364

我想这是因为初始化变量的代码从来没有真正被调用过。只要你的DOM被加载到浏览器中的变量会得到初始化

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

这样：尝试做如下（你需要的jQuery它）。

来源

2015-11-06 09:29:56

getElementsByTagName返回名称为“td”的元素列表，并且您没有用于元素列表的属性backgroundColor，则必须使用像foreach这样的函数。

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

而且每个元素在“x”中都会有背景色为黄色。

来源

2015-11-06 09:37:07

为什么我的变量“undefined”

回答

相关问题