JavaScript for循环绑定按钮onclick传参均为循环终值问题

安全阿岳

2026-8-29

问题原因

你通过setAttribute给按钮绑定onclick事件时，传入的是字符串'addinv(i)'，字符串里的变量i不会在循环执行阶段被替换为当时的循环值，而是等到用户点击按钮、事件触发时，才会到全局作用域查找i的实际值。
你的for循环没有使用let/const/var声明循环变量i，导致i成为隐式全局变量。循环的终止条件是i<4，当i递增到4时循环停止，此时全局作用域下的i值固定为4，后续所有按钮点击时取到的i都是4，因此所有按钮都会调用addinv(4)。

修复方法

方法1：绑定事件时直接把当前循环的i值拼接入字符串

修改onclick属性的赋值逻辑，在循环阶段就把当前i的值直接写入事件字符串，让每个按钮绑定的事件直接写死对应id，不再依赖全局变量i：

function location0() {
    const equip = ["Spada", "Corda", "Acciarino"]
    // 用let声明循环变量，避免隐式全局污染
    for (let i = 1; i < 4; i++) {
        document.getElementById(i).innerHTML = equip[i-1]
        // 用模板字符串把当前i的值嵌入，最终生成的事件为addinv(1)/addinv(2)/addinv(3)
        document.getElementById(i).setAttribute('onclick', `addinv(${i})`)
    }
}

如果不使用模板字符串，也可以用普通字符串拼接：

document.getElementById(i).setAttribute('onclick', 'addinv(' + i + ')')

方法2：改用事件监听器绑定（更规范的写法）

不推荐使用字符串形式的内联事件绑定，可以改用addEventListener绑定事件，配合let的块级作用域特性，每次循环都会生成独立的i副本，不会出现变量共享问题：

function location0() {
    const equip = ["Spada", "Corda", "Acciarino"]
    for (let i = 1; i < 4; i++) {
        const btn = document.getElementById(i)
        btn.innerHTML = equip[i-1]
        btn.addEventListener('click', () => {
            addinv(i)
        })
    }
}