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

Question

I was trying to create an overlay but when I click on the button the overlay don't show up. 我试图创建一个叠加层，但是当我单击按钮时，该叠加层不显示。

In the console log the error ' overlay.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null ' appears. 在控制台日志中，显示错误' overlay.js：4 Uncaught TypeError：无法读取属性'addEventListener'为null '。 I already tried by myself to solve this problem, I'm just a beginner.. I hope someone can solve the problem for me. 我只是一个人，我已经尝试自己解决这个问题。我希望有人可以为我解决问题。 Thanks for the effort! 感谢您的努力！

HTML 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 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 使用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

The DOM hasn't been loaded yet. DOM尚未加载。 You need to put in the handler to the load event 您需要将处理程序放入load事件

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2019-06-04 20:23:12

解决方案2
0 2019-06-04 20:24:07

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2019-06-04 20:23:12

解决方案2 0 2019-06-04 20:24:07

解决方案1
4 已采纳 2019-06-04 20:23:12

解决方案2
0 2019-06-04 20:24:07