如何使用 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