点击按钮后文本无法显示在最近的.msg元素，仅显示在首个.msg元素求助

你的问题出在document.querySelector('.msg')——这个方法只会返回页面中第一个匹配.msg类的元素，所以不管点击哪个按钮，内容都会覆盖到第一个.msg里。要实现点击按钮对应到其下方的.msg，需要基于当前点击的按钮去定位对应的目标元素，这里提供两种简单的实现方式：

方法1：通过父容器定位 #

利用按钮和.msg同属一个父div的结构，先获取按钮的父元素，再在父元素内查找.msg：

let btn = document.querySelectorAll('button');

btn.forEach(function(button) {
  button.addEventListener('click', function() {
    // 获取当前按钮的父容器，再找到容器内的.msg元素
    const targetMsg = this.parentElement.querySelector('.msg');
    targetMsg.innerHTML = this.innerHTML;
  });
});

方法2：直接获取下一个兄弟元素 #

因为.msg是按钮的直接下一个同级元素，可以用nextElementSibling直接定位：

let btn = document.querySelectorAll('button');

btn.forEach(function(button) {
  button.addEventListener('click', function() {
    // 获取按钮的下一个兄弟元素（就是对应的.msg）
    const targetMsg = this.nextElementSibling;
    targetMsg.innerHTML = this.innerHTML;
  });
});

完整代码示例 #

<div>
  <button class="btn">button 1</button>
  <p class="msg"></p>
</div>
<div>
  <button class="btn">button 2</button>
  <p class="msg"></p>
</div>
<div>
  <button class="btn">button 3</button>
  <p class="msg"></p>
</div>

<script>
let btn = document.querySelectorAll('button');

btn.forEach(function(button) {
  button.addEventListener('click', function() {
    const targetMsg = this.parentElement.querySelector('.msg');
    targetMsg.innerHTML = this.innerHTML;
  });
});
</script>

关键改动说明 #

• 原代码中x.closest(".msg")无效，因为x是赋值后的字符串而非DOM元素，调用closest会报错，已移除
• 改为基于当前点击的按钮（this）定位对应的.msg元素，确保每个按钮只操作自己对应的目标区域

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