我试图创建一个叠加层，但是当我点击按钮时，叠加层没有显示。
在控制台日志中出现错误“overlay.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null”。我已经自己尝试解决这个问题，我只是一个初学者..我希望有人能为我解决这个问题。感谢您的努力!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
</head>
<body>
<div id="nav" class="overlay">
<button id="afsluiten" href="#" class="close">Afsluiten</button>
<div class="overlay__content">
<a href="">Home</a>
<a href="">Profile</a>
<a href="">Images</a>
<a href="">About</a>
<a href="">Product</a>
</div>
</div>
<button id="open" href="#" class=open"">Open Overlay</button>
<script src="overlay.js"></script>
</body>
</html>
CSS
body{
font-family: sans-serif;
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: limegreen;
overflow-x: hidden;
z-index: 5;
}
.overlay__content{
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a{
padding: 10px;
color: black;
font-size: 40px;
text-decoration: none;
display: block;
}
.overlay .close{
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
Javascript
var open = document.querySelector('.open');
var close = document.querySelector('.close');
open.addEventListener('click', function (ev) {
ev.preventDefault();
openOverlay();
}, false);
function openOverlay() {
document.querySelector('.nav').style.width = "100%";
}
最佳答案
您的线路<button id="open" href="#" class=open"">Open Overlay</button>类名有错
<button id="open" href="#" class="open">Open Overlay</button>
关于javascript - 我试图用 Javascript 创建一个叠加层，但叠加层没有显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56450813/