如何处理多个按钮？

Question

我想处理多个按钮。我的目标是当用户单击first button时，first paragraph将被更改，当用户单击second button时，second paragraph将被更改。我试过了但没起作用。请检查我的代码并给我一个解决方案..。

​

var len = document.querySelectorAll(".myButton").length
var plen = document.querySelectorAll(".myP").length
for (i = 0; i < len; i++) {
  for (j = 0; j < plen; j++) {
    document.querySelectorAll(".myButton")[i].addEventListener("click", function() {
      if (document.querySelectorAll(".myButton")[i] == document.querySelectorAll(".myP")[j]) {
        document.querySelectorAll(".myP")[j].innerHTML = document.querySelectorAll(".myButton")[i].innerHTML;
      }
    });
  }
}

<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>

​

错误：

5_eventListener.html:43 Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
    at HTMLButtonElement.<anonymous> (5_eventListener.html:43:119)

错误行：

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

Answer 1

您的代码需要闭包才能工作，这是相当棘手的。

相反，委托-在这里，我从文档委托，但如果按钮有一个包装，您可以从它委托。

简单多了。还可以使用数据属性将目标分配给按钮。

​

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (!tgt.matches(".myButton")) return 
  document.getElementById(tgt.dataset.target).innerHTML = tgt.innerHTML;
})  

<p class="myP" id="p1">oke</p>
<p class="myP" id="p2">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" data-target="p1">one</button>
<button class="btn bg-primary text-light mx-5 my-5 myButton" data-target="p2">two</button>

​

Answer 2

我不明白你为什么需要这样的东西--但是，这里--一个非常接近@mplungjan的版本是正确的，我只是不认为你应该听一下整个文档的点击，我希望它也能让初学者更容易读懂。

活生生的例子：

https://jsfiddle.net/dm3bwzgr/

<p id="p1">text 1</p>
<p id="p2">text 2</p>

<button class="btn" data-target="p1">Button 1</button>
<button class="btn" data-target="p2">Button 2</button>

<script>
// listen to click event on all buttons
document.querySelectorAll('.btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var target = btn.dataset.target
        var el = document.getElementById(target)
              
        // apply button text to target element
        el.innerHTML = btn.innerHTML;
    });
});
</script>