时间戳

首页 > 解决方案 > 我尝试使用 Javascript 创建叠加层，但叠加层没有显示

javascript - 我尝试使用 Javascript 创建叠加层，但叠加层没有显示

问题描述

我试图创建一个叠加层，但是当我单击按钮时，叠加层没有显示出来。

在控制台日志中出现错误“ 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%";
}

标签： javascripthtmlcss

解决方案

Your line <button id="open" href="#" class=open"">Open Overlay</button> has a typo on the class name

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

推荐阅读