Question

我试图创建一个叠加层，但是当我单击按钮时，该叠加层不显示。

在控制台日志中，出现错误“ overlay.js：4未捕获的TypeError：无法读取属性'addEventListener'为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%";
}

Answer 1

您的行<button id="open" href="#" class=open"">Open Overlay</button>的班级名称有错字

<button id="open" href="#" class="open">Open Overlay</button>

Answer 2

尚未加载DOM。您需要将处理程序放入load事件

我尝试使用Javascript创建覆盖图，但该覆盖图未显示

2 个答案: