的Javascript的onclick挑隨機HTML元素和風格它

-4

您好，我需要一些幫助的JavaScript 我是新手自學成才的Javascript的onclick挑隨機HTML元素和風格它

哪能代碼 - 我有一張桌子和2個按鈕，當我按下按鈕，我想選擇隨機表數據（從1到9）並將其更改爲背景顏色

當我按下第二個按鈕 - 按順序將表格數據從1更改爲9。

//我的JavaScript知識是非常低的，但我知道我需要給ID爲我的每個表中的數據，一個按鈕的onclick =「隨機的（）」，功能隨機（） - 但我不知道如何挑選隨機ID，我給我的TD

\t <script type="text/javascript"> 
 

 
\t \t //function random() { 
 
\t \t // \t var myArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9"); 
 
\t \t // \t var x = Math.floor((Math.random() * 9) + 1);} 
 
\t 
 
\t \t document.getElementById("random").onclick = function() { 
 

 
\t \t \t document.getElementById("1").style.backgroundColor = "red"; 
 

 
\t \t } 
 

 
\t </script>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Javascript homework</title> 
 
\t <meta charset="utf-8" /> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t <style type="text/css"> 
 
\t \t 
 
\t table { 
 

 
\t \t border: 1px solid black; 
 

 
\t } 
 

 
\t th, td { 
 

 
\t \t height: 150px; 
 
\t \t width: 150px; 
 
\t \t text-align: center; 
 
\t \t color: black; 
 
\t \t background-color: white; 
 
\t \t font-size: 35px; 
 
\t \t border: 1px solid black; 
 

 
\t } 
 
\t </style> 
 

 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-3"></div> 
 
\t \t \t \t \t <div class="col-md-6"> \t 
 
\t \t \t \t \t \t <table> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="1">1</td> 
 
\t \t \t \t \t \t \t \t <td id="2">2</td> 
 
\t \t \t \t \t \t \t \t <td id="3">3</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="4">4</td> 
 
\t \t \t \t \t \t \t \t <td id="5">5</td> 
 
\t \t \t \t \t \t \t \t <td id="6">6</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="7">7</td> 
 
\t \t \t \t \t \t \t \t <td id="8">8</td> 
 
\t \t \t \t \t \t \t \t <td id="9">9</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t <button id="random" type="button" onclick="random()">Random</button> 
 
\t \t \t \t \t \t <button id="next" type="button" onclick="next()">Next</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-3"></div> 
 
\t \t </div> 
 
\t </div> 
 

 
</body> 
 
</html>

來源

2017-06-17 Aleksej

向我們展示你的代碼，無論你試過不工作。 –

請確保[創建一個最小化，完整和可驗證的示例]（https://stackoverflow.com/help/mcve） – Mayday

錯誤的JavaScript代碼我知道，我知道如何更改點擊元素但不是隨機元素在評論我試圖拿出陣列 – Aleksej

編輯：

看評論裏JS：

function random(){ 
 
    //make a collection with all td elements 
 
    var items = document.getElementsByTagName("td"); 
 

 
    for(i=0; i < items.length; i++){ 
 
     //that delete old backgroundColor style 
 
     items[i].style.backgroundColor = ''; 
 
    }; 
 
    //choose a random id between 1 and 9 
 
    var random_id = Math.floor((Math.random()*9)+1); 
 
    //aply the red style color to this random element 
 
    document.getElementById(random_id).style.backgroundColor = "#ff0000"; 
 

 
};

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Javascript homework</title> 
 
\t <meta charset="utf-8" /> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t <style type="text/css"> 
 
\t \t 
 
\t table { 
 

 
\t \t border: 1px solid black; 
 

 
\t } 
 

 
\t th, td { 
 

 
\t \t height: 50px; 
 
\t \t width: 50px; 
 
\t \t text-align: center; 
 
\t \t color: black; 
 
\t \t background-color: white; 
 
\t \t font-size: 15px; 
 
\t \t border: 1px solid black; 
 

 
\t } 
 
\t </style> 
 

 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-3"></div> 
 
\t \t \t \t \t <div class="col-md-6"> \t 
 
\t \t \t \t \t \t <table> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="1">1</td> 
 
\t \t \t \t \t \t \t \t <td id="2">2</td> 
 
\t \t \t \t \t \t \t \t <td id="3">3</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="4">4</td> 
 
\t \t \t \t \t \t \t \t <td id="5">5</td> 
 
\t \t \t \t \t \t \t \t <td id="6">6</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="7">7</td> 
 
\t \t \t \t \t \t \t \t <td id="8">8</td> 
 
\t \t \t \t \t \t \t \t <td id="9">9</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t <button id="random" type="button" onclick="random()">Random</button> 
 
\t \t \t \t \t \t <button id="next" type="button" onclick="next()">Next</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-3"></div> 
 
\t \t </div> 
 
\t </div> 
 

 
</body> 
 
</html>

來源

2017-06-17 23:12:47 MTK

你能解釋你的答案？ – hardkoded

thx它的作品但我怎麼做後，第二次點擊只有1元素將是紅色？ – Aleksej

@kblok我認爲你的意思是關於這個Math.floor（（Math.random（）*（9-1））+ 1）;.我依稀記得兩個數字之間的隨機函數。正確的是** Math.floor（Math.random（）*（max-min + 1）+ min）; **但在1-9之間不需要9-1 + 1。我現在編輯了正確的隨機 – MTK

只是返回1和9之間的隨機數（參見隨機函數）。使用document.getElementById選擇該元素，並將其設置爲紅色。

見下文：

function random() { 
 
    return Math.floor((Math.random() * 9) + 1); 
 
} 
 
\t 
 
document.getElementById("random").onclick = function() { 
 
    document.getElementById(random()).style.backgroundColor = "red"; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Javascript homework</title> 
 
\t <meta charset="utf-8" /> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t <style type="text/css"> 
 
\t \t 
 
\t table { 
 

 
\t \t border: 1px solid black; 
 

 
\t } 
 

 
\t th, td { 
 

 
\t \t height: 50px; 
 
\t \t width: 50px; 
 
\t \t text-align: center; 
 
\t \t color: black; 
 
\t \t background-color: white; 
 
\t \t font-size: 15px; 
 
\t \t border: 1px solid black; 
 

 
\t } 
 
\t </style> 
 

 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-3"></div> 
 
\t \t \t \t \t <div class="col-md-6"> \t 
 
\t \t \t \t \t \t <table> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="1">1</td> 
 
\t \t \t \t \t \t \t \t <td id="2">2</td> 
 
\t \t \t \t \t \t \t \t <td id="3">3</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="4">4</td> 
 
\t \t \t \t \t \t \t \t <td id="5">5</td> 
 
\t \t \t \t \t \t \t \t <td id="6">6</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td id="7">7</td> 
 
\t \t \t \t \t \t \t \t <td id="8">8</td> 
 
\t \t \t \t \t \t \t \t <td id="9">9</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t <button id="random" type="button" onclick="random()">Random</button> 
 
\t \t \t \t \t \t <button id="next" type="button" onclick="next()">Next</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-3"></div> 
 
\t \t </div> 
 
\t </div> 
 

 
</body> 
 
</html>

來源

2017-06-17 23:13:13 FrankerZ

thx它的作品但我怎麼能這樣做後，第二次點擊只有一個元素將是紅色的？ – Aleksej

的Javascript的onclick挑隨機HTML元素和風格它

回答

相關問題