JavaScript中按数值倍数递增变量的问题排查与修正

需求说明 #

实现点击按钮触发的函数，读取输入框中的cp、sp、ep、gp数值，按照100cp=1gp、10sp=1gp、2ep=1gp的规则，将所有可转换的数值转为gp并累加，但原函数无法正确实现gp的持续递增。

原代码核心问题 #

• DOM元素获取错误：document.getElementsByClassName()返回HTMLCollection集合，直接访问.value会得到undefined，必须通过索引[0]获取单个输入框元素
• 数据类型未转换：输入框的value是字符串类型，直接进行数学运算会导致逻辑错误，需要转为数字
• 转换逻辑错误：原代码仅判断是否能整除就加1，未计算实际可转换的GP总量（比如150cp应转换为1gp，而非仅整除才加1）
• 按钮绑定错误：onClick={Convert()}会在页面加载时立即执行函数，而非点击时触发，应传递函数引用
• 结果输出错误：原代码直接输出字符串"gp"，未输出计算后的实际GP数值

修正后的代码 #

修正后的JavaScript函数

function Convert() {
    // 获取输入框值并转为数字，空值默认0避免报错
    const cp = Number(document.getElementsByClassName("copper")[0].value) || 0;
    const sp = Number(document.getElementsByClassName("silver")[0].value) || 0;
    const ep = Number(document.getElementsByClassName("electrum")[0].value) || 0;
    const gp = Number(document.getElementsByClassName("gold")[0].value) || 0;
    // 补充铂金转换逻辑（1pp=10gp）
    const pp = Number(document.getElementsByClassName("platinum")[0].value) || 0;

    // 计算总GP：各货币转换后累加原GP
    const totalGp = gp 
        + Math.floor(cp / 100) 
        + Math.floor(sp / 10) 
        + Math.floor(ep / 2)
        + pp * 10;

    // 更新结果显示
    document.getElementsByClassName("result")[0].textContent = totalGp + " gp";
}

修正后的JSX按钮部分

<Button variant="primary" type="button" className="w-25" onClick={Convert}>
    Submit
</Button>

关键修正说明 #

• 使用Math.floor()确保只取整数部分，符合货币转换的整数规则
• 添加|| 0处理输入框为空的情况，避免出现NaN计算错误
• 按钮type改为button，避免默认表单提交行为干扰
• 用textContent代替innerHTML，纯文本输出更安全高效

内容的提问来源于stack exchange，提问作者S. Lowe