如何使用 JavaScript 抓取隨機 div？

Question

我正在使用 JavaScript 創建一個網格。 我想要做的是創建一個隨機框，當我點擊“播放”按鈕時，它會改變顏色，但我似乎無法弄清楚。

我試過使用各種數量的 Math.random()，這可能是我的問題所在。

 const container = document.getElementById('container'); const gameButton = document.createElement('button'); // This is the button I'm trying to use for this. gameButton.addEventListener('click', function (event) { let getRandom = document.getElementsByTagName('div'); }); let userInput = prompt('Enter a number between 10-20: '); if (isNaN(userInput)) { alert('Numbers only.'); location.reload(); } else if (userInput < 10) { alert('That\\'s less than 10'); location.reload(); } else if (userInput > 20) { alert('That\\'s greater than 20'); location.reload(); } else { gameButton.textContent = 'Play'; gameButton.style.height = '25px'; gameButton.style.width = '50px'; gameButton.style.borderRadius = '7px'; gameButton.style.marginBottom = '15px'; container.appendChild(gameButton); } for (let index = 1; index <= userInput; index++) { let gameBoard = document.createElement('div'); gameBoard.setAttribute('class', 'game-board'); container.appendChild(gameBoard); for (let j = 0; j < userInput; j++) { const square = document.createElement('div'); square.setAttribute('class', 'square'); gameBoard.appendChild(square); } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <title>Document</title> </head> <body> <div id="container"> </div> <!---<script src="./app.js"></script>---> </body> </html>

預期結果是單擊按鈕時“div”更改顏色之一。

Answer 1

在您的問題和您的代碼之間，這有點令人困惑。 但只要按照你說的去做，這里有一種從元素列表中選擇一個隨機元素的方法，前提是你給它一個類名（隨意調整）：

// Function to get a random number, taking in min and max values.
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)

// Function that takes in a class name to select all those elements
// on the page, and returns a random one from the list.
const getRandomElement = className => {
  const elements = document.querySelectorAll(`.${className}`)
  const num = randomNum(0, elements.length - 1)
  return elements[num]
}

Answer 2

您可以像這樣更改事件偵聽器中的代碼：

gameButton.addEventListener('click', function (event) {
    let divs = document.getElementsByClassName('game-board');
    let random_div = divs[Math.floor(Math.random()*divs.length)];
    random_div.style.backgroundColor = 'red';
});

或者，如果您只想更改一個方塊的顏色，請改用 document.getElementsByClassName('square')。

Answer 3

代碼的相關部分。 你可以讓它更好地檢查元素、樣式等。但本質上它是：

gameButton.addEventListener('click', function (event) {
    let getRandom = document.getElementsByTagName('div');
    var a = Math.random()
    let b = a.toString().substr(2, 1)
    getRandom[b].style = 'background-color: ' + (parseInt(b) % 2 == 0 ? 'yellow' : 'red')
});

因此，您使用 Math.Random 在 dot(.) 之后獲取一些隨機數，並使用它從 getRandom 獲得的集合中讀取一些索引。 然后你只需設置元素樣式或任何你想要的。

小提琴： https : //jsfiddle.net/cm5kyrdj/

如何使用 JavaScript 抓取隨機 div？

問題描述

3 個解決方案

解決方案1
0 已采納 2019-06-14 19:09:33

解決方案2
0 2019-06-14 19:18:17

解決方案3
0 2019-06-14 19:28:50

如何使用 JavaScript 抓取隨機 div？

問題描述

3 個解決方案

解決方案1 0 已采納 2019-06-14 19:09:33

解決方案2 0 2019-06-14 19:18:17

解決方案3 0 2019-06-14 19:28:50

解決方案1
0 已采納 2019-06-14 19:09:33

解決方案2
0 2019-06-14 19:18:17

解決方案3
0 2019-06-14 19:28:50