Javascript 为什么我的JS弹出窗口没有'；你不能在多元素上工作吗？_Javascript_Html_Css

Javascript 为什么我的JS弹出窗口没有'；你不能在多元素上工作吗？

javascript html css

Javascript 为什么我的JS弹出窗口没有'；你不能在多元素上工作吗？,javascript,html,css,Javascript,Html,Css,我实际上是从头开始创建一个论坛。这个脚本创建一个弹出窗口，当我们点击删除，我使2个按钮删除，但只有一个工作。代码： Html代码-> <!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="styletest.css"> </head> <bod

我实际上是从头开始创建一个论坛。这个脚本创建一个弹出窗口，当我们点击删除，我使2个按钮删除，但只有一个工作。代码：

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>

我该如何做：当我点击“删除”按钮时，打开我的弹出窗口，但“删除”2也打开它？你能帮我吗？：）

仅针对一个示例：）在HTML中，我将

id=“remove\u openpopup”

更改为

class=“remove\u openpopup”

在

中，我将执行以下操作

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


var modal=document.getElementById（“弹出”）；
var btns=Array.prototype.slice.call（document.queryselectoral（“.remove\u openpopup”）；
var span=document.getElementsByClassName（“关闭”）[0]；
var span2=document.getElementsByClassName（“关闭按钮”）[0]；
btns.forEach（功能（btn）{
btn.onclick=函数（）{
modal.style.display=“块”；
}
});
span.onclick=函数（）{
modal.style.display=“无”；
}
span2.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

对不起，又是什么问题？您预期的结果是什么？由于PHP

while

循环，您将最终创建具有相同ID的多个元素“popup”。这在HTML中无效。这也是一个相当基本的逻辑错误……如果它们都具有相同的ID，那么当您运行getElementById时，代码如何知道您请求的是哪一个？显然没有办法解决这个问题。所以它总是只返回第一个。就JavaScript而言，其他脚本实际上并不存在。您需要使用类而不是IDsP.s。您的删除按钮和表单也会出现同样的问题。好的，我编辑，如果您不理解@Hastatamangh问题，请告诉我如何解决@ADyson？Ty，以及如何使我的表单适用于2弹出窗口？因为实际上它不起作用

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

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