Javascript 多按钮和模态

我是JS的新手，虽然我买了一些书来开始正确的学习，但我想知道是否有人可以对此提出建议？我有一家列出许多产品的商店。在商店页面上，我在每个商品的底部都添加了一个按钮，当你点击按钮时，我想要一个动作。我已经应用了这段代码，但它仍然只在第一个元素上工作-因为它基于id：

HTML:

开放模式
&时代；
模态中的一些文本

JS:

//获取模式
window.onload=函数（）{
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}};

我曾尝试更改JS以适应这样的类名，但没有成功：

// Get the modal
 window.onload = function(){
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openmodal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}};

//获取模式
window.onload=函数（）{
var modal=document.getElementsByClassName（'modal'）；
//获取打开模式对话框的按钮
var btn=document.getElementsByClassName（“OpenModel”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}};

请问有人能帮忙吗

提前谢谢

---

Chris

您应该使用

类

而不是

id

，因为

id

必须是唯一的

然后，您必须使用

onclick

方法为每个按钮绑定

单击
事件处理程序

<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
 <div class="modal myModal">

  <!-- Modal content -->
  <div class="modal-content">
  <span class="close">&times;</span>
  <p>Some text in the Modal..</p>
  </div>
</div>

开放模式
&时代；
模型中的一些文本1

开放模态
&时代；
模态2中的一些文本

开放模态
&时代；
模态3中的一些文本

开放模态
&时代；
模块4中的一些文本

开放模态
&时代；
模块5中的一些文本

开放模态
&时代；
模块6中的一些文本

添加完整的html代码。
getElementsByClassName
不返回单个元素，而是返回一个
NodeList
。您需要首先从中提取所需的元素，例如，使用
for
循环对其进行迭代。@Walshie1987，它对您有效吗？您好，我现在出去，但我会尽快尝试。看起来很有希望！我明白我错在哪里了。我很快就回来！谢谢Alexandru，我已经在Fiddle上测试过了，它工作得很好，但由于某些原因，它在我的网站上不起作用。我在代码中添加了一个警报，在模式设置的下面：
code
alert（modals[0]）
code
但我得到的输出是：objecthtmldevelment。再次感谢你的帮助！成功了！！我在开始时添加了
window.onload=function（）{
，非常完美。另外，Dreamweaver出于某种原因将
let
作为语法错误突出显示出来，但它在我的测试站点上仍然有效。非常感谢您的帮助！
// Get the modal
 window.onload = function(){
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openmodal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}};

<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
 <div class="modal myModal">

  <!-- Modal content -->
  <div class="modal-content">
  <span class="close">&times;</span>
  <p>Some text in the Modal..</p>
  </div>
</div>

var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("openmodal");
var spans=document.getElementsByClassName("close");
for(let i=0;i<btns.length;i++){
   btns[i].onclick = function() {
      modals[i].style.display = "block";
   }
}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
       modals[i].style.display = "none";
    }
 }