僅使用JavaScript選擇隨機HTML元素

我試圖從我的HTML代碼中選擇一個元素，然後在JavaScript中使用它（它需要突出顯示）。 HTML由一個包含36個td的表格組成。僅使用JavaScript選擇隨機HTML元素

我迄今爲止代碼：

var box; 
function getRandom() 
{ 
    return (Math.floor(Math.random()*37)) 
} 
function highlight() 
{ 
    box = document.getElementById(getRandom()); 
    box.style.backgroundColor = "yellow"; 
}

如果誰能給我任何指針，它會受到讚賞。我知道使用jQuery會很容易，但我還沒有開始學習。編輯：HTML代碼摘錄，這將上升到名稱=「36」。

<table id="reflexTable"> 
    <tbody> 
    <tr> 
     <td name="1"></td> 
     <td name="2"></td> 
     <td name="3"></td> 
     <td name="4"></td> 
     <td name="5"></td> 
     <td name="6"></td> 
    </tr>

來源

2011-09-29 Jens Eeckhout

你有什麼問題？ – Paddy

嗯，它根本不起作用。我的輸出控制檯指出「box」爲空。對不起，我忘了補充一點。 –

發佈表格的html。 –

getElementById獲得其擁有的元素匹配id。您的表格數據單元根本沒有標識。他們有一個名字，但HTML不允許。

切換到ID。

HTML 4不允許ID以數字開頭。在一個普通的字符串前加上id。然後：

document.getElementById("foo" + getRandom());

來源

2011-09-29 10:12:18 Quentin

沒有'name'屬性謝謝。使用「名稱」而不是「ID」可能是一個新手的錯誤。另外，我沒有想到將數字用作身份證的事實是被禁止的。 –

你沒有設置id屬性，你設置的name屬性，將其更改爲：

<td id="1"></td>

...等

來源

2011-09-29 10:11:32

幾件事情：

你應該申報的亮點函數內部的箱變。
您必須將該隨機數轉換爲字符串。
昆汀提到的一些重要的事情 - 你應該給每個表元素的東西，如「S0」，「S1」，「S2」等的ID ...
開始命名爲0因爲你的getRandom函數有時會返回它。

function highlight（）{ var number; number = getRandom（）。toString（）; var box; box = document.getElementById（「s」+ number）; box.style.backgroundColor =「yellow」; }

來源

2011-09-29 10:27:50

不涉及調整元件ID的更好的方式：

function highlight() { 

    // get all TDs that are descendants of table#reflexTable: 
    var tds = document.getElementById('reflexTable').getElementsByTagName('td'); 

    // get a random int between 0 (inclusive) and tds.length (exclusive) 
    var rand = Math.floor(Math.random() * tds.length); 

    // highlight td at that index 
    tds[rand].style.backgroundColor = "yellow"; 

}

這種方法的最大優點是，你可以添加/刪除，請你儘可能多的達陣，而無需編輯您的JS來生成一個有效的隨機數。

來源

2011-09-29 16:58:53 megaflop

僅使用JavaScript選擇隨機HTML元素

回答

相關問題