Javascript innerHTML 更新問題

Question

我有以下 JavaScript 線：

<div id="box" name="1" margin="4px" padding="4px" onclick="memory(1)"></div>

關聯的memory() function 為：

function memory(a) {
    var tmpDar = a-1;
    var m = document.getElementsByName(tmpDar);
    m.innerHTML = arrA[tmpDar];

}

但是，當我嘗試執行代碼時，HTML 不會改變......有人可以幫我嗎？

Answer 1

document.getElementsByName()返回一個 NodeList 而不是單個元素！

因此，為了設置您的 div 的innerHTML ，您必須在該數組中引用一個條目，例如，像這樣：

function memory(a) {
    var tmpDar = a-1;
    var m = document.getElementsByName(tmpDar);
    m[0].innerHTML = arrA[tmpDar];
}

在您的代碼中，您為 NodeList object 設置了innerHTML屬性，該屬性在文檔中沒有（視覺）效果。

一般來說，使用id而不是name會更好。 然后你可以像這樣使用document.getElementById() ：

function memory(a) {
    var tmpDar = a-1;
    var m = document.getElementById(tmpDar);
    m.innerHTML = arrA[tmpDar];
}

Answer 2

據我所知，您試圖查找名稱為0的所有元素。 並且沒有0名稱。

還有其他兩個所說的，它返回一個數組，您需要調用該數組的索引。

Answer 3

document.getElementsByName返回一個數組。 因此，如果您想要的元素具有此名稱是唯一的，則應將代碼替換為：

function memory(a) {
    var tmpDar = a-1;
    var m = document.getElementsByName(tmpDar);
    m[0].innerHTML = arrA[tmpDar];  // Here I have added index 0
}