爲什麼我的變量「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」

回答

相關問題