Javascript 根据元素的ID将eventlistener应用于多个元素

我有两个用ID定义的按钮：但是切换，但是关闭以显示隐藏面板：

<button id="but-toggle">Panel</button>
<div id="main-panel" style="display:none">
   <button id="but-close">X</button>
   <!-- some panel data -->
</div>

我的问题是如何对两个按钮使用相同的函数，而不编写两个func，每个func一个。 我想要一个基于元素ID的解决方案，因为这些类是不同的，不能使用getElementByClass来解决这个问题

---

谢谢

您可以使用下面的按钮获取所有按钮

 var btns=document.getElementsByTagName('button');
     
 for (let i = 0; i < btns.length; i++) {
   btns[i].addEventListener("click", function() {
     //code
   });
 }
     

（或） 基于多入侵检测系统

document.querySelectorAll('#id1, #id2, #id3');

---

然后您可以添加eventListener

您可以使用

document.querySelector

从ID列表中获取元素列表：

function toggleFn() {
  const pan = document.getElementById("main-panel");
  if(pan.style.display === "inline-block") {
    pan.style.display = "none";
  } else {
    pan.style.display = "inline-block";
  }
}
document.querySelector("#Id1, #Id2")
  .forEach(elem => elem.addEventListener(toggleFn);

---

你关闭什么？我隐藏了面板，它就像一个有信息的面板，上面有一个关闭按钮，可以从显示切换到隐藏。你也可以使用

document.querySelectorAll（“#ID1，#ID2”）

是的，但在我的例子中，我有很多其他按钮，我不想分配这个吗？@PabloLozano你能举个例子作为答案吗？我会接受的，如果这是有效的，谢谢你们两个用querySelector（“#Id1，#Id2”）发布了正确答案。。。。。“我只能用FIFO算法在你们之间做出决定，”巴勃罗首先发帖说，“谢谢你们两位。”

document.querySelectorAll('#id1, #id2, #id3');

function toggleFn() {
  const pan = document.getElementById("main-panel");
  if(pan.style.display === "inline-block") {
    pan.style.display = "none";
  } else {
    pan.style.display = "inline-block";
  }
}
document.querySelector("#Id1, #Id2")
  .forEach(elem => elem.addEventListener(toggleFn);