JavaScript点击按钮生成随机数时数组未重置导致数字累加问题

点击按钮后数字持续追加、数量越来越多的问题，来自两处逻辑缺失重置步骤：

• 全局数组randomNumbersArray从未清空，每次生成随机数都直接通过push追加新值，数组长度会随点击次数不断增长
• 渲染函数中使用+=往展示容器追加DOM节点，从未清除容器内已有的旧内容，之前生成的数字会一直留在页面上

不需要修改HTML和CSS代码，仅需调整JS逻辑，在两个核心函数执行正式逻辑前增加重置操作：

1. 生成新随机数前，先把randomNumbersArray重置为空数组
2. 渲染新数字前，先把展示容器的innerHTML设为空，清除所有旧的数字节点

let randomNumbersArray = [];
const containerEl = document.querySelector(".container");
let numbersEl = document.querySelector(".numbers")
const randomNumberBtn = document.querySelector("#random-number-btn");
const showRandomNumbersEl = document.querySelector(".showRandomNumbers");
const countInputEl = document.querySelector("#number-random-numbers");

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) => {
    // 当前逻辑固定生成10个0-999的随机数，需要自定义数量时可读取countInputEl的值传入
    getRandomNumbers(10, 1000);
    showRandomNumbers();
})

代码中已经预留了输入生成数量的输入框，如果需要支持用户自定义生成随机数的个数，可以把点击事件里传入getRandomNumbers的第一个参数替换为输入框的数值即可，注意要把输入的字符串转为数字类型再传入。

内容的提问来源于stack exchange，提问作者KristofferTheDane