显示数字时重置数组的问题

我是javascript的新手，每次用户点击按钮时，我都试图生成随机数。但是现在数字被添加到数组的末尾，因此出现更多的数字，而不是全部重置。

有人能帮帮我吗?

这是我到目前为止尝试的:

let randomNumbersArray = [];
const containerEl = document.querySelector(".container");
let numbersEl = document.querySelector(".numbers")
const randomNumberBtn = document.querySelector("#random-number-btn");
const showRandomNumbersEl = document.querySelector(".showRandomNumbers");
function getRandomNumbers(numbers, amount) {
for (let i = 0; i < numbers; i++) {
let randomNumber = Math.floor(Math.random() * amount);
randomNumbersArray.push(randomNumber);
}
}
function showRandomNumbers() {
for (let y = 0; y < randomNumbersArray.length; y++) {
showRandomNumbersEl.innerHTML += `<div class="numbers">${randomNumbersArray[y]}</div>`
}
}
randomNumberBtn.addEventListener("click", (e) => {
getRandomNumbers(10, 1000);
showRandomNumbers();
})

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.showRandomNumbers {
display: grid;
grid-template-columns: repeat(8, 42px);
text-align: center;
gap: 5px;
margin-top: 10px;
}
.showRandomNumbers div {
border: 1px solid #000;
padding: 6px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="container">
<div class="listOfNumbers">
<h4>How many random numbers?</h4>
<input type="text" id="number-random-numbers">
<button id="random-number-btn">Get numbers</button>
</div>
<div class="showRandomNumbers">
</div>
</div>
</body>
</html>

我想出了这个(阅读评论):

function getRandomNumbers(numbers, amount) {
// basically your creating a new array each time you call the function
randomNumbersArray = Array(numbers).fill(undefined).map(_ => Math.floor(Math.random() * amount))
}
function showRandomNumbers() {
// here i reset the content of the container each time you call the function so every time it just shows the new ones
showRandomNumbersEl.innerHTML = '';
for (const rndNumber of randomNumbersArray) {
showRandomNumbersEl.innerHTML += `<div class="numbers">${rndNumber}</div>`
}
}

观察/建议:

在压入新的随机数之前清空randomNumbersArray数组。
showRandomNumbersEl.innerHTML在showRandomNumbers()方法中显示新记录集之前应该为空

演示strong>:

let randomNumbersArray = [];
const containerEl = document.querySelector(".container");
let numbersEl = document.querySelector(".numbers")
const randomNumberBtn = document.querySelector("#random-number-btn");
const showRandomNumbersEl = document.querySelector(".showRandomNumbers");
function getRandomNumbers(numbers, amount) {
randomNumbersArray = [];
for (let i = 0; i < numbers; i++) {
let randomNumber = Math.floor(Math.random() * amount);
randomNumbersArray.push(randomNumber);
}
}
function showRandomNumbers() {
showRandomNumbersEl.innerHTML = '';
for (let y = 0; y < randomNumbersArray.length; y++) {
showRandomNumbersEl.innerHTML += `<div class="numbers">${randomNumbersArray[y]}</div>`
}
}
randomNumberBtn.addEventListener("click", (e) => {
getRandomNumbers(10, 1000);
showRandomNumbers();
})

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.showRandomNumbers {
display: grid;
grid-template-columns: repeat(8, 42px);
text-align: center;
gap: 5px;
margin-top: 10px;
}
.showRandomNumbers div {
border: 1px solid #000;
padding: 6px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="container">
<div class="listOfNumbers">
<h4>How many random numbers?</h4>
<input type="text" id="number-random-numbers">
<button id="random-number-btn">Get numbers</button>
</div>
<div class="showRandomNumbers">
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：