模板按钮不能使用Javascript

Question

我一直在尝试为我的HTML模板分配一个按钮，它会加载一个带有一些进一步描述的模态--- buuuut由于某种原因我实际上无法获得修改css display:none的按钮，因为它一直在制作它动态加载内容。

控制台报告btn is null，但我尝试window.onload以及DOMContentLoaded无济于事。这与动态加载有关，我可能需要将id分配给单个按钮吗？

Codepen here for sake of long code

任何帮助将不胜感激。

Answer 1

好的，我想我已经解决了你的问题。老实说，你真的不应该像这样展示你的问题/代码，它真的很难理解和排除故障（阅读this）。

无论如何......几个问题：

• 你正在克隆元素，因此，所有元素都将共享它们的属性（id，name等）。这是相关的，因为每个人都有一个不同的模态框。
• 您正在尝试在创建此类元素之前访问元素（追加事件侦听器）。因此，在克隆每个元素时应创建事件侦听器。
• 您的模态框已使用“display：block”进行初始化，但您评论说您需要将其隐藏在开始中。

我已经改变了你的代码，所以每个元素都会创建一个新的id（每个模态框），并为它添加一个事件监听器。

最相关的变化是：

clone.querySelector(".wineWrapper", "#myBtn").id+=count;
clone.querySelector(".wineWrapper", "#myBtn"+count).onclick=  function(e) {     
     this.nextElementSibling.style.display = "block";
}
clone.querySelector(".close").onclick=function(){
  this.parentNode.parentNode.style.display = "none";
}

Codepen

注意：我已经破坏了你的窗口监听器（我认为它可能是你的问题的原因，最初），所以如果你需要它，请评论答案，我将进行编辑。