解决JavaScript for循环绑定事件i值异常，实现单选框对应数组内容填充

你遇到的是JavaScript闭包中的变量绑定问题：循环里的i没加声明，属于全局变量，当循环结束后i的值已经变成2（因为thank.length是2，循环条件i<2，最后一次循环后i变成2时退出）。等你点击单选框触发回调函数时，访问的i已经是这个最终值，自然取不到thank数组里的对应元素。

下面给你几种可行的修改方案：

方案1：用let声明循环变量，形成块级作用域 #

把循环里的i用let声明，这样每次循环都会创建一个独立的i变量，回调函数会绑定当前循环的i值：

let basetext = [];
let text1 = document.getElementById("text")
text1.value = basetext.join('')

const thank = [`hi`, `bye`]

// 用let声明i，形成块级作用域
for (let i=0; i<thank.length; i++) {
    document.getElementById("thank"+i).addEventListener("click", function () {
        basetext[i] = thank[i]
        text1.value = basetext.join('')
    })
}

方案2：从单选框元素本身提取索引 #

不需要依赖循环变量，直接从选中元素的id里提取数字索引，这种方法更灵活，哪怕后续新增单选框也不用改循环逻辑：

let basetext = [];
let text1 = document.getElementById("text")
text1.value = basetext.join('')

const thank = [`hi`, `bye`]

// 给所有name为thank的单选框绑定事件
document.querySelectorAll('input[name="thank"]').forEach(radio => {
    radio.addEventListener('click', function() {
        // 从id里提取索引：比如"thank0"提取出0
        const index = parseInt(this.id.replace('thank', ''));
        basetext[index] = thank[index];
        text1.value = basetext.join('');
    });
});

方案3：用立即执行函数保存当前索引值（旧版JS兼容方案） #

如果需要兼容ES6之前的环境，可以用立即执行函数把当前循环的i值保存下来：

let basetext = [];
let text1 = document.getElementById("text")
text1.value = basetext.join('')

const thank = [`hi`, `bye`]

for (var i=0; i<thank.length; i++) {
    // 用IIFE保存当前i的值
    (function(currentIndex) {
        document.getElementById("thank"+currentIndex).addEventListener("click", function () {
            basetext[currentIndex] = thank[currentIndex]
            text1.value = basetext.join('')
        })
    })(i);
}

补充说明：操作textarea内容时，用value属性比innerHTML更规范，上面的代码已经统一修改为text1.value。

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