多按钮事件绑定故障排查：点击按钮无法对应修改段落内容

问题概述 #

需求为：点击第一个按钮时修改第一个段落内容，点击第二个按钮时修改第二个段落内容。原代码运行时触发如下错误：

5_eventListener.html:43 Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')

错误指向行：

document.querySelectorAll(".myP")[j].innerHTML = document.querySelectorAll(".myButton")[i].innerHTML;

原代码问题分析 #

1. 循环变量作用域问题：原代码中i和j是全局变量，当点击事件触发时，循环已经执行完毕，此时i等于按钮总数（2），j等于段落总数（2），超出了DOM元素的索引范围（索引从0开始，最大为1），导致访问document.querySelectorAll(".myButton")[i]时返回undefined，进而触发读取innerHTML的错误。
2. 冗余嵌套循环：按钮和段落数量一致，无需嵌套循环一一绑定，这会导致每个按钮被绑定多次事件，逻辑冗余。
3. 错误的条件判断：document.querySelectorAll(".myButton")[i] == document.querySelectorAll(".myP")[j]的逻辑不成立，按钮和段落是完全独立的DOM元素，不可能相等。

修正后的代码 #

HTML代码（结构无需修改） #

<p class="myP">oke</p>
<p class="myP">oke</p>

<h1 class="pt-3 pb-3 pl-5 pr-5 bg-warning text-light btn mx-5 my-5">00</h1><br>
<hr style="background-color:red; width:50%">
<button class="btn bg-primary text-light mx-5 my-5 myButton">one</button>
<button class="btn bg-primary text-light mx-5 my-5 myButton">two</button>

JavaScript代码 #

// 缓存DOM元素，避免重复查询
const buttons = document.querySelectorAll(".myButton");
const paragraphs = document.querySelectorAll(".myP");

// 遍历按钮，绑定对应索引的段落修改事件
buttons.forEach((button, index) => {
  button.addEventListener("click", () => {
    // 确保对应索引的段落存在时再修改
    if (paragraphs[index]) {
      paragraphs[index].innerHTML = button.innerHTML;
    }
  });
});

修正说明 #

• 变量作用域优化：使用forEach遍历，其自带的index参数为块级作用域，点击事件触发时能正确获取当前按钮对应的索引值。
• 性能优化：提前缓存querySelectorAll的结果，避免每次事件触发时重复查询DOM。
• 逻辑简化：直接通过索引一一对应按钮和段落，去掉冗余的嵌套循环和无效判断。
• 容错处理：增加paragraphs[index]存在性判断，防止按钮数量多于段落时出现报错。

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