为什么我的JS弹出窗口不适用于多个元素？

Question

I'm actually creating a forum from scratch. 我实际上是从头开始创建一个论坛。 This script create a popup when we click on remove, i make 2 button remove but only one work. 当我们单击删除时，此脚本会创建一个弹出窗口，我将2个按钮删除，但只有一个工作。 Code: 码：

Html Code -> HTML代码->

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="styletest.css">
  </head>
  <body>
    <a href="#" id="remove_openpopup">remove</a>
    <a href="#" id="remove_openpopup">remove2</a>

    <div id="popup" class="popup">
      <div class="popup_content">
        <span class="close">&times;</span>
        <p>Are you sure you wan't delete this categorie ?</p>
        <button class="button_popup close_button">No</button>
        <button class="button_popup close_button" onclick='document.getElementById("remove").submit()'>Yes</button>
      </div>
    </div>
  </body>
</html>

JS: JS：

var modal = document.getElementById("popup");

var btn = document.getElementById("remove_openpopup");

var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close_button")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

span2.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

How can i make: when i click on remove it open my popup but remove2 open it too ? 我该如何做：当我单击“删除”时，会打开我的弹出窗口，但也要删除“ remove2”吗？ Can you help me please ? 你能帮我吗？ :) :)

Answer 1

Just for a sample :) In HTML, I changed id="remove_openpopup" to class="remove_openpopup" 仅作为示例：)在HTML中，我将id="remove_openpopup"更改为class="remove_openpopup"

<a href="#" class="remove_openpopup">remove</a>
<a href="#" class="remove_openpopup">remove2</a>

In <script> , I would do as below. 在<script> ，我将执行以下操作。

<script>
var modal = document.getElementById("popup");
var btns = Array.prototype.slice.call(document.querySelectorAll(".remove_openpopup"));
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close_button")[0];
btns.forEach(function(btn) {
  btn.onclick = function() {
    modal.style.display = "block";
  }
});
span.onclick = function() {
  modal.style.display = "none";
}
span2.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

为什么我的JS弹出窗口不适用于多个元素？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-06-01 12:48:32

为什么我的JS弹出窗口不适用于多个元素？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-06-01 12:48:32

解决方案1
1 已采纳 2019-06-01 12:48:32