如何在JavaScript中动态修改input值？随机数生成器输入修改不生效

你的代码仅在页面首次加载完成时读取了一次最大值、最小值输入框的初始值，存储到全局变量maxNum和minNum中，后续提交表单生成随机数时，不会重新读取输入框的最新修改值，因此一直沿用初始值计算结果。

将读取输入框值、数值格式化的逻辑移到表单提交触发函数GetNumberSubmit内部，保证每次生成随机数前都获取最新的输入值。另外你现有HTML代码中最小值输入框对应的label标签for属性值写错了，修正后点击label可以正常聚焦到对应输入框，同时新增最大值必须大于最小值的合法性校验，避免计算出错。

JS代码 #

const result = document.getElementById("result");
const form = document.getElementById("form");

// 提交表单时触发
function GetNumberSubmit(e) {
    e.preventDefault();
    // 每次提交都重新读取最新输入值
    let maxNum = parseFloat(document.getElementById("max").value);
    let minNum = parseFloat(document.getElementById("min").value);
    // 数值格式化
    minNum = Math.ceil(minNum);
    maxNum = Math.floor(maxNum);

    if(!maxNum || !minNum) {
        alert("请输入两个有效值");
        return;
    }
    if(maxNum <= minNum) {
        alert("最大值必须大于最小值");
        return;
    }
    result.value = GetRandomNumber(minNum, maxNum);
}

// 把最值作为参数传入，避免依赖全局变量
function GetRandomNumber(minNum, maxNum) {
    return Math.floor(Math.random() * (maxNum - minNum + 1 ) + minNum );
}

form.addEventListener('submit', GetNumberSubmit);

HTML代码（仅修正label属性错误） #

<div class="game-container">
    <h1>随机数生成器</h1>
    <form id="form">
       <input type="text" 
              placeholder="" 
              id="result" value=""/>
        <div class="form-control-container">
            <div class="form-control">
                <label for="max">最大值</label> 
                <input id="max" value="10"/>
            </div>

            <div class="form-control">
                <label for="min">最小值</label> 
                <input id="min" value="5"/>
            </div>
        </div>
        <button  class="submit-btn" id="button">生成</button>
    </form>
</div>

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