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>

预期结果是单击按钮时'divs'更改颜色之一。

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 个答案: