JavaScript新手求助：如何将重复的输入同步代码转为循环？

优化后的完整代码 #

// 批量获取需要同步的输入框与对应span元素
const inputs = document.querySelectorAll('#bns, #id, #img, #lg');
const spans = document.querySelectorAll('span');

// 遍历输入框，绑定keyup事件实现实时同步
inputs.forEach((inputElement, index) => {
  inputElement.addEventListener('keyup', () => {
    spans[index].textContent = inputElement.value;
  });
});

优化思路与步骤 #

• 批量获取元素：用document.querySelectorAll一次性选中所有目标输入框和span，无需单独声明多个变量。注意输入框的选择顺序要和span在DOM中的顺序完全对应，确保索引匹配。
• 循环绑定事件：通过forEach遍历输入框数组，为每个输入框单独绑定keyup事件。利用遍历的index直接关联到spans数组的对应位置，省去了给span添加额外类名的冗余操作。
• 精准同步内容：每个输入框的keyup事件只同步自身内容到对应span，相比原代码给全局绑定事件的方式，性能更优，逻辑更清晰。同时使用textContent替代innerText，这是更符合标准的DOM文本操作方法。

原代码的问题改进 #

• 移除了重复的变量声明与赋值语句，代码结构更简洁
• 取消了给span添加t0/t1这类类名的不必要操作
• 避免了全局keyup事件导致的无效触发，只在目标输入框输入时执行同步逻辑

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