javascript - <span> onclick 事件未触发

Question

我正在尝试在单击注册按钮时制作一个简单的模式弹出窗口。通过更改 display: none 模式打开得很好至 display: block但我无法通过单击 <span> 来关闭它标签。

点击事件未在 <span> 上触发但是当点击容器外部时它会触发。我不知道为什么。我做错了什么？

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

还有 JS:

var modalPopup = document.getElementById('modalPopup');
var modalBtn = document.getElementById('modalBtn');
var close = document.getElementsByClassName('close');

// Opens modal on modalBtn click
modalBtn.onclick = function() {
modalPopup.style.display = "block";
}

// Closes the modal on 'X' click
close.onclick = function() {
modalPopup.style.display = "none";
console.log('wtf why is this not working')
}

// Closes the modal on outside window click
window.onclick = function(event) {
  if (event.target == modalPopup) {
    modalPopup.style.display = "none";
  }
}

这是一个 fiddle :https://jsfiddle.net/3n1mpaex/1/

很抱歉，如果之前有人问过这个问题，我四处搜索了一下，找不到我需要的答案。谢谢!

Answer 1

getElementsByClassName 返回一个数组。您将“onclick”附加到数组而不是跨度。

因此您只需按如下方式简单地更新您的函数。

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

https://jsfiddle.net/3n1mpaex/3/