Javascript <；span>；onclick事件未触发

我试图在点击注册按钮时弹出一个简单的模式窗口。通过将

display:none

更改为

display:block

，模式可以正常打开，但我无法通过单击

标记将其关闭

单击事件不是在

上触发的，而是在容器外部单击时触发的。我不知道为什么。我做错了什么

以下是HTML：

<a id="modalBtn" href="#0">Get started</a>
  <div id="modalPopup" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div>
        <input id="email" type="email" placeholder="Email">
        <input id="password" type="password" placeholder="Password">
        <button id="quickstart-sign-in" href="#">Log in</button>
        <button id ="quickstart-sign-up" href="#">Sign up</button>
      </div>
    </div>
  </div>

这是一把小提琴：

---

对不起，如果以前有人问过这个问题，我搜索了一下，没有找到我需要的答案。谢谢

document.getElementsByClassName

返回集合/数组，这样您就可以使用

close[0]

而不是

close

//获取模态元素
var modalPopup=document.getElementById（'modalPopup'）；
var modalBtn=document.getElementById（'modalBtn'）；
var close=document.getElementsByClassName（'close'）；
//在modalBtn上打开模态单击
modalBtn.onclick=函数（）{
modalpoup.style.display=“块”；
}
//单击“X”关闭模式
关闭[0]。onclick=function（）{
modalpoup.style.display=“无”；
console.log（'wtf为什么不工作'）
}
//关闭上的模式
window.onclick=函数（事件）{
if（event.target==modalpoup）{
modalpoup.style.display=“无”；
}
}

/*模式（背景）*/
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
}
/*模态内容/框*/
.模态内容{
背景色：#fefe；
利润率：150px自动；
/*从顶部到中心的15%*/
填充：20px；
边框：1px实心#888；
宽度：375px；
/*根据屏幕大小的不同，大小可能有所不同*/
}
/*关闭按钮*/
.结束{
颜色：#aaa；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：黑色；
文字装饰：无；
光标：指针；
}

&时代；
登录
注册

getElementsByClassName

返回一个数组。将“onclick”附加到数组而不是范围

因此，您只需按如下方式更新您的函数

close[0].onclick = function() {
 modalPopup.style.display = "none";
 console.log('wtf why is this not working')
}

---

只需将

close

类更改为id（

）就是这样！：）快乐编码
看看这个：

//获取模态元素
var modalPopup=document.getElementById（'modalPopup'）；
var modalBtn=document.getElementById（'modalBtn'）；
var close=document.getElementById（'close'）；
//在modalBtn上打开模态单击
modalBtn.onclick=函数（）{
modalpoup.style.display=“块”；
}
//单击“X”关闭模式
close.onclick=函数（）{
modalpoup.style.display=“无”；
console.log（'它现在正在工作'）
}
//关闭上的模式
window.onclick=函数（事件）{
if（event.target==modalpoup）{
modalpoup.style.display=“无”；
}
}

/*模式（背景）*/
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
}
/*模态内容/框*/
.模态内容{
背景色：#fefe；
利润率：150px自动；
/*从顶部到中心的15%*/
填充：20px；
边框：1px实心#888；
宽度：375px；
/*根据屏幕大小的不同，大小可能有所不同*/
}
/*关闭按钮*/
#接近{
颜色：#aaa；
浮动：对；
字号：28px；
字体大小：粗体；
}
#关闭：悬停，
#结束：焦点{
颜色：黑色；
文字装饰：无；
光标：指针；
}

&时代；
登录
注册

close[0].onclick = function() {
 modalPopup.style.display = "none";
 console.log('wtf why is this not working')
}