JavaScript RNG实现min/max/平均值计算并绑定给定HTML的问题

原有代码核心问题 #

• 随机数生成逻辑提前return，后续给输入框赋值的代码完全不会执行
• 没有批量生成随机数的逻辑，单次生成单个值时最大、最小、平均三个值完全一致，不符合数据模拟的常规需求
• min、max、average三个变量没有初始化和统计逻辑，直接赋值会运行报错

逻辑说明 #

默认每次点击按钮生成10个介于10000到60000之间的整数，再对这批数值计算最大值、最小值、平均值，最后填入对应输入框，可自行调整生成的样本数量。

完整可运行代码 #

HTML代码 #

<h2>Problem #4: Data Simulation</h2>
<button onclick="runSimulation()">Run Simulation</button><br>
Largest number: <input type="text" id="max" disabled><br>
Smallest number: <input type="text" id="min" disabled><br>
Average: <input type="text" id="average" disabled><br>

JavaScript代码 #

const LOWER_BOUND = 10000;
const UPPER_BOUND = 60000;
// 每次模拟生成的随机数数量，可自行修改
const SAMPLE_COUNT = 10;

function runSimulation() {
    // 存储所有生成的随机数
    let randomNumbers = [];
    // 批量生成指定范围的随机整数
    for (let i = 0; i < SAMPLE_COUNT; i++) {
        let num = Math.floor(Math.random() * (UPPER_BOUND - LOWER_BOUND + 1)) + LOWER_BOUND;
        randomNumbers.push(num);
    }
    // 统计最大值、最小值、平均值
    let max = Math.max(...randomNumbers);
    let min = Math.min(...randomNumbers);
    let sum = randomNumbers.reduce((prev, curr) => prev + curr, 0);
    let average = (sum / SAMPLE_COUNT).toFixed(2); // 平均值保留两位小数，可自行调整精度
    
    // 赋值到页面输入框
    document.querySelector("#max").value = max;
    document.querySelector("#min").value = min;
    document.querySelector("#average").value = average;
}

如果需求是每次点击仅生成1个随机数，直接把SAMPLE_COUNT改成1即可，此时三个输入框会显示相同的值。

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