<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"; 
    } 
} 

这里有一个小提琴：https://jsfiddle.net/3n1mpaex/1/

很抱歉，如果这已被问过，我搜索了一下周围和couldn很难找到我需要的答案。谢谢！

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/

Answer 2

document.getElementsByClassName回报集合/数组，以便您可以使用close[0]代替close
updated fiddle

// Get modal elements 
 
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[0].onclick = function() { 
 
    modalPopup.style.display = "none"; 
 
    console.log('wtf why is this not working') 
 
    } 
 
    // Closes the modal on 
 
window.onclick = function(event) { 
 
    if (event.target == modalPopup) { 
 
    modalPopup.style.display = "none"; 
 
    } 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 

 
/* Modal Content/Box */ 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 150px auto; 
 
    /* 15% from the top and centered */ 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 375px; 
 
    /* Could be more or less, depending on screen size */ 
 
} 
 

 

 
/* The Close Button */ 
 

 
.close { 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<a id="modalBtn" href="#0">CLICK HERE</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>

Answer 3

只要改变你的close类为ID（<span id="close"></span>）。 就是这样！ :)快乐编码！
检查了这一点：

// Get modal elements 
 
var modalPopup = document.getElementById('modalPopup'); 
 
var modalBtn = document.getElementById('modalBtn'); 
 
var close = document.getElementById('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('It is now working') 
 
    } 
 
    // Closes the modal on 
 
window.onclick = function(event) { 
 
    if (event.target == modalPopup) { 
 
    modalPopup.style.display = "none"; 
 
    } 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 

 
/* Modal Content/Box */ 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 150px auto; 
 
    /* 15% from the top and centered */ 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 375px; 
 
    /* Could be more or less, depending on screen size */ 
 
} 
 

 

 
/* The Close Button */ 
 

 
#close { 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
#close:hover, 
 
#close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<a id="modalBtn" href="#0">CLICK HERE</a> 
 
<div id="modalPopup" class="modal"> 
 
    <div class="modal-content"> 
 
    <span id="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>