试图让php foreach循环中的javascript函数正常工作

我最近回答了一个关于使用一些简单的javascript创建两个弹出框的问题。我已经附上下面答案的演示。我是一名PHP开发新手，刚刚开始学习JS。我的问题是

下面的代码是用于论坛的。”问一个问题'创建一个弹出窗口，在那里可以问一个问题-这部分代码很好。这些问题是使用一个简单的PHP foreach循环从我的数据库中提取出来的，对于每个问题，我需要一个“编辑”按钮，每个问题创建一个弹出的“编辑问题”。下面的演示用于编辑一个问题（第一个），但不适用于后续问题。我知道这可能是一件简单的事情，与函数如何调用等有关，但尽管在网上找到了“解决方案”，我还是无法让任何东西起作用。我习惯于在PHP中随时调用函数，并且可以调用任意次数。显然，我的JS不是这样写的。有人能给我一些建议吗

HTML

javascript

     window.onload = function () {
     document.getElementById("AskQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "block";
     popup.style.display = "block";
     };

     document.getElementById("CloseBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "none";
     popup.style.display = "none";
     };

     document.getElementById("EditQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "block";
     popupEdit.style.display = "block";
     };

     document.getElementById("CloseEditBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "none";
     popupEdit.style.display = "none";
   };
  };

我希望这是清楚的…并感谢任何帮助。这些天来，我似乎每天都在向Stackoverflow求助……看

演示

---

我试过这个

JS

CSS

HTML 提问 编辑问题

   <div id="overlay"></div>

   <div id="popup">
   <h2>Question?</h2>
   <button id="CloseBtn">Close</button>
   </div>

   <div class="popupEdit">
   <h2>Edit Question</h2>
   <button class="CloseEditBtn">Close</button>
   </div>

问题？
接近
编辑问题
接近

---

仍然不走运……有人吗？

如果你想编辑每个问题（在数据库中更新），你需要数据库中的问题id

我会这样做：

<button id="EditQuestion" onclick="editQuestion(2);">Edit question</button>

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div> 

<div id="popupEdit2">
<h2>Edit Question</h2>
<button id="CloseEditBtn2">Close</button>
</div> 

编辑问题

在onclick操作中，将id（本例中为2）作为参数传递。在editQuestion（）函数中，显示弹出窗口，并在编辑表单中的隐藏字段中包含此id

<script>
function editQuestion(questionId){
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   //in your edit form, create a hidden field and put var questionId in as value
   overlay.style.display = "block";
   popupEdit.style.display = "block";
}
</script>

函数editQuestion（问题ID）{
var overlay=document.getElementById（“overlay”）；
var popupEdit=document.getElementById（“popupEdit”）；
//在编辑表单中，创建一个隐藏字段，并将var questionId作为值放入其中
overlay.style.display=“块”；
popupEdit.style.display=“块”；
}

问题在于您是通过id获取元素的，但是如果您有一些不同的元素，javascript不知道哪个元素是正确的元素。因此，您可以修改脚本，为每个元素添加顺序id，如下所示：

<button id="EditQuestion" onclick="editQuestion(2);">Edit question</button>

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div> 

<div id="popupEdit2">
<h2>Edit Question</h2>
<button id="CloseEditBtn2">Close</button>
</div> 

更好的方法是使用类名对元素进行分组和检索。因此，向intrest的每个元素添加一些类标识符，并使用document.getElementsByClassName（'someClass'）

<script>
function editQuestion(questionId){
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   //in your edit form, create a hidden field and put var questionId in as value
   overlay.style.display = "block";
   popupEdit.style.display = "block";
}
</script>

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div> 

<div id="popupEdit2">
<h2>Edit Question</h2>
<button id="CloseEditBtn2">Close</button>
</div> 

 window.onload = function () {
   document.getElementById("AskQuestion").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popup = document.getElementById("popup");
   overlay.style.display = "block";
   popup.style.display = "block";
 };

 document.getElementById("CloseBtn").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popup = document.getElementById("popup");
   overlay.style.display = "none";
   popup.style.display = "none";
 };

 document.getElementById("EditQuestion").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   overlay.style.display = "block";
   popupEdit.style.display = "block";
 };

 document.getElementById("CloseEditBtn").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "none";
   popupEdit.style.display = "none";
 };



 document.getElementById("EditQuestion2").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "block";
   popupEdit.style.display = "block";
 };

 document.getElementById("CloseEditBtn2").onclick = function () {
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit2");
   overlay.style.display = "none";
   popupEdit.style.display = "none";
 };