JavaScript - 通过单击 id 和 addEventListener 仅更改一个按钮

Question

当我按下第一个按钮时，它会发生变化，但是当我按下第二个按钮时，什么也没有发生。你怎样才能做到这一点，以便即使有更多按钮他也会听到按钮的点击？

我希望当我按下一个按钮时它才会改变

我的 HTML 和 JavaScript:

<button id="mybtn1"> Click </button>
<button id="mybtn1"> Click </button>
<script>


document.getElementById('mybtn1').addEventListener('click', 
  function() {
    this.textContent = 'Hello there!';
  }
);

谢谢

Answer 1

id 在文档中应该是唯一的。请改用class。然后使用querySelectorAll()和 forEach()浏览所有按钮并单独附加事件:

document.querySelectorAll('.mybtn1').forEach(function(btn){
  btn.addEventListener('click', function() {
    this.textContent = 'Hello there!';
  });
});

<button class="mybtn1"> Click </button>
<button class="mybtn1"> Click </button>