javascript - 当我调整一张床单的窗口大小时，我的汉堡包按钮不起作用。但它确实适用于我的第一张纸（或首页）

Question

我正在做一个网络项目来学习 js、html 和 css。这个网页有一个首页（我不能在这里发布，因为它只允许 1 个 html 文件）和一个名为“私人事件”的部分，它有自己的 html 文件，但它与整个网页共享相同的 css 文件。当我调整页面大小时，顶部菜单应该保持隐藏状态，并且应该会出现一个汉堡包按钮，该菜单应为较小的窗口正确显示。它确实在前页上工作，但在这张纸上不起作用。

它说：“Uncaught TypeError: Cannot read property 'addEventListener' of null at main.js:35” 我正在使用相同的类和 ID，这似乎不是拼写错误，我不知道它可能是什么。为了清楚起见，当我在较小的窗口中打开页面时，菜单消失（应该如此），汉堡包按钮出现（应该如此），但是当我点击它时，它不会变成我的 X 形状想要，菜单也没有出现。

let sliderImages=document.querySelectorAll(".slide");
let flechaIzq= document.querySelector("#flecha-izq");
let flechaDer= document.querySelector("#flecha-der");
let current=0;

//resetea todas las imagenes
function reset(){
    for(let i=0; i < sliderImages.length;i++){
        sliderImages[i].style.display='none';
    }
}

//inicia el slider
function startSlide(){
    reset();
    sliderImages[current].style.display="block";
    if(current < sliderImages.length - 1)
    {
        current++;
    }else{
        current = 0;
    }
    
    setTimeout("startSlide()",5000);
}

//mostrar anterior
function slideLeft(){
    reset();
    sliderImages[current -1].style.display="block";
    current--;
}

//flecha izq al clickear
flechaIzq.addEventListener('click', function(){
    if (current === 0){
        current=sliderImages.length;
    }
    slideLeft();
})

//mostrar siguiente
function slideRight(){
    reset();
    sliderImages[current+1].style.display="block";
    current++;
}

//flecha der al clickear
flechaDer.addEventListener('click', function(){
    if (current === sliderImages.length -1){
        current=- 1;
    }
    slideRight();
});

startSlide();


/* this is the code for the hamburguer button */
var header = document.querySelector(".btn-header-container");
var btn_header= document.querySelectorAll(".btn_header");

function myFunction(x) {
    header.classList.toggle("btn-header-toggle");
    for (let i = 0; i < btn_header.length; i++) {
        btn_header[i].classList.toggle("btn_toggle");
    }
    x.classList.toggle("change");
}

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var botones = document.getElementsByClassName("btn_barra")

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
for (let k = 0; k < botones.length; k++) {
    botones[k].addEventListener('click', function() {
        switch (k) {
            case 0:
                document.getElementById("titulo_0").innerHTML = "Desayuno & Merienda";
                document.getElementById("titulo_1").innerHTML = "Licuados";
                document.getElementById("titulo_2").innerHTML = "Facturas";
                document.getElementById("titulo_3").innerHTML = "Tostados";
                document.getElementById("titulo_4").innerHTML = "Pancakes";
                modal.style.display = "block";
                break;
            case 1:
                document.getElementById("titulo_0").innerHTML = "Almuerzo & Cena";
                document.getElementById("titulo_1").innerHTML = "Entradas";
                document.getElementById("titulo_2").innerHTML = "Carnes";
                document.getElementById("titulo_3").innerHTML = "Pastas";
                document.getElementById("titulo_4").innerHTML = "Menú Vegano";
                modal.style.display = "block";
                break;
            case 2:
                document.getElementById("titulo_0").innerHTML = "Postres";
                document.getElementById("titulo_1").innerHTML = "Helados";
                document.getElementById("titulo_2").innerHTML = "Tortas";
                document.getElementById("titulo_3").innerHTML = "Copas Heladas";
                document.getElementById("titulo_4").innerHTML = "Especiales";
                modal.style.display = "block";
                break;
        }
    })
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.top_bar{
    overflow: hidden; /* para que los botones no salgan del container al usar float*/
}
body{
    background-image: linear-gradient(#FEFFFE, floralwhite);
}
a {
    text-decoration: none;
}
.logo{
    height:10%;
    width:10%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding:10px;
    margin-top:10px;
}

.btn_header{
    color:#931621;
    background: transparent; 
    float:right;
    padding:10px;
    margin-right:5px;
    bottom:80px;
    font-family: 'Ubuntu', sans-serif;
    font-size:13px;
    text-transform: uppercase;
    border:none;
    opacity:80%;
    position:relative; /* para mover a los botones */
    border-right: 2px ridge #FF1B1C;
}

.btn_header:hover{
    color: black;
    font-size:15px;
    transition-duration: 0.5s;
    cursor:pointer;
}


/* PRESENTACION (SLIDER)*/

#slider, .wrap, .slide-contenido{
    margin:0;
    padding:0;
    width:100%;
    height:60vh;
    overflow-x:hidden; /* saca las barras horizontales*/
}

.wrap{ 
    position: relative;
}

.slide{
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
}

.slide1{background-image:url(/imagenes/slider/img5.jpg)}
.slide2{background-image:url(/imagenes/slider/img2.jpg)}
.slide3{background-image:url(/imagenes/slider/img3.jpg)}
.slide4{background-image:url(/imagenes/slider/img4.jpg)}
.slide5{background-image:url(/imagenes/slider/img1.jpg)}

.slide-contenido{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.reservas{
    font-size:20px;
    padding:15px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    background-color: #FFECCC;
    border:none;
    opacity:80%;
}

.reservas:hover{
    cursor:pointer;
    border: 2px solid #A4303F;
    transition-duration: 0.5s;
}

.flecha{
    cursor:pointer;
    position:absolute;
    top:60%;
    margin-top:-50px;
    width:0;
    height:0;
    border-style:solid;
    opacity:70%;
}

#flecha-izq{
    border-width: 30px 40px 30px 0;
    left:0;
    margin-left:30px;
    border-color: transparent #FFF8F0 transparent transparent;
}
#flecha-izq:hover{
    border-color: transparent #616163 transparent transparent;
    transition-duration: 0.3s;
}

#flecha-der{
    border-width: 30px 0px 30px 40px;
    right:0;
    margin-right:30px;
    border-color: transparent transparent transparent #FFF8F0;
}
#flecha-der:hover{
    border-color: transparent transparent transparent #616163;
    transition-duration: 0.3s;
}

.descripcion h1{
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0em;
        line-height: 1em;
        font-size: 32px;
        padding:10px;
}

.descripcion {
    color: #363732;
    text-align: center;
    margin:80px 180px 5px 180px;
    font-size:17px;
}



.barra{
    text-align: center;
}
.btn_barra{
    letter-spacing: 0.3em;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding:20px 40px;
    text-transform: uppercase;
    border:2px solid black;
    position:relative;
    margin:30px;
    cursor:pointer;
    background-color:#EEF8FF;
}

.btn_barra:hover{
    background-color: #08090A;
    color:white;
    transition-duration: 0.5s;
}

.informacion{
    display:flex;
    justify-content:space-evenly;
}

.flex-item{
  text-align:center;
  font-family: 'Montserrat', sans-serif;
}

.flex-item p{
    line-height: 0.5em;
    color:#363732;
}

.flex-item h4{
    color: #C14953;
    font-weight: 1000;
    border-bottom:1px solid black;
}

.grid-container{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,550px));/*3fr 3fr*/
    grid-template-rows: repeat(3,600px);
	grid-column-gap: 3em;
    grid-row-gap: 3em;
    justify-content:center; /* para que quede todo centrado*/
    margin-top:50px;
}

.item-a{
    background-image: url(imagenes/grid/burguer.jpg);
    background-size:cover;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*grid-column:1/1;
    grid-row: 1/1;*/
    text-align: center;
}
.item-a:hover{
    cursor:pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    opacity:70%;
    transition-duration: 0.3s;
}

.item-b{
    background-image: url(imagenes/grid/cerveza.jpg);
    background-size:cover;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*grid-column:1/1;
    grid-row: 2/2;*/
    text-align: center;
}
.item-b:hover{
    cursor:pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    opacity:70%;
}

.item-c{
    background-image: url(imagenes/grid/pancake.jpg);
    background-size:cover;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*grid-column:1/1;
    grid-row: 3/3;*/
    text-align: center;
}
.item-c:hover{
    cursor:pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    opacity:70%;
}

.titulo-img{
    font-size: 10vh;
    margin-top:250px;
    color:#FEFFEA;
    font-family: 'Monoton', cursive;
}

.item-a-text{
    background-color:#FCFC62;
    /*grid-column: 2/2;
    grid-row:1/1;*/
    text-align:center;
}
.item-b-text{
    background-color:#F06543;
    /*grid-column: 2/2;
    grid-row:2/2;*/
    text-align:center;
}
.item-c-text{
    background-color:#8FF7A7;
    /*grid-column: 2/2;
    grid-row:3/3;*/
    text-align:center;
}

.titulo-grid{
    margin-top:100px;
    font-size:60px;
    font-family: 'Amatic SC', cursive;

}

.parrafo-grid{
    margin-left:30px;
    margin-right:30px;
    font-family: 'Kalam', cursive;
    font-size:20px;
}

.btn-grid{
    margin-top:20px;
    padding:30px;
    font-family: 'Montserrat', sans-serif;
    font-size:15px;
    color:white;
    background-color: #F21B3F;
    border:none;
    cursor:pointer;
}

.btn-grid:hover{
    font-size:18px;
    transition-duration: 0.3s;
}


.grid-feed{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 500px;
    margin:50px 50px 50px 50px;
    grid-gap:4em;
    overflow:hidden;
}
#mapa{
    grid-column: 1/1;
    grid-row:1/1;
}
#instagram-feed{
    width:50%;
    height:50%;
    grid-column:2/2;
    grid-row:1/1;
}

.footer{
    margin-top:150px;
    text-align:center;
    color: #596157;
    font-family: 'Montserrat', sans-serif;
}

.footer span{
    color:#E3655B;
    font-weight:700;
}

.footer div p:nth-child(3){
    font-weight: bold;
}

/* 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 {
    position: relative;
    background-color: #22223B;
    color:white;
    opacity: 90%;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  /* Modal Header */
.modal-header {
    padding: 5px 16px;
    color: white;
    border-bottom: 2px solid  lightblue;
    letter-spacing: 0.3em;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    text-transform: uppercase;
    background-color:black;
    opacity:70%;
}

/* Modal Body */
.modal-body {
    padding:20px;
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid lightblue;
}

.modal-body div{
    padding:20px 50px;
    
}
.modal-body h4{
    font-family: 'Montserrat', sans-serif;
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight: lighter;
}


/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

/*CSS DE PAGINA DE EVENTOS PRIVADOS*/
#body_eventos{
    background-image: url(imagenes/fondo_evento.jpg);
    background-repeat: repeat;
    background-size:cover;
}
.grid-eventos{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,550px));
    grid-template-rows: repeat(3,600px);
	grid-column-gap: 3em;
    grid-row-gap: 3em;
    justify-content:center; /* para que quede todo centrado*/
    margin-top:50px;
}

#foto-ev-1{
    background-image: url(imagenes/eventos/img1.jpg);
    border-radius:400px;
}
#foto-ev-2{
    background-image: url(imagenes/eventos/img2.jpg);
    border-radius:400px;
}
#foto-ev-3{
    background-image: url(imagenes/eventos/img3.jpg);
    border-radius:400px;
}
.foto-ev{
    background-size:cover;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    text-align: center;
}
.info-ev{
    text-align:center;
    margin-top:80px;
    font-size:2.7vh;    
    font-family: 'Montserrat', sans-serif;
}
.info-ev h2{
    font-family: 'Playfair Display', serif;
    letter-spacing:0.2em;
}







/* de acuerdo a la pantalla*/
@media only screen and (max-width: 1200px) {
    .logo{
        height:20%;
        width:20%;
    }
    
    .btn-container {
        display: inline-block;
        cursor: pointer;
        position:absolute;
        margin-top:60px;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }

    /* Rotate first bar */

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    /* Fade out the second bar */
    .change .bar2 {
        opacity: 0;
    }

    /* Rotate last bar */
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

    .btn-header-container{
        display:none;
        margin-top:100px;
    }
    .btn_header{
        display:none;
        padding:10px;
        background-color:floralwhite;
        color:#931621;
        font-family: 'Ubuntu', sans-serif;
        font-size:13px;
        text-transform: uppercase;
        border:none;
        opacity:80%;
    }

    .btn-header-toggle{
        display:grid;
        margin-top:100px;
    }
    .btn_toggle{
        display:block;
        padding:10px;
        background-color:floralwhite;
        color:#931621;
        font-family: 'Ubuntu', sans-serif;
        font-size:13px;
        text-transform: uppercase;
        border:none;
        opacity:80%;
        text-align:center;
        border-bottom:1px ridge #931621;
    }

    .descripcion h1{
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0em;
        line-height: 1em;
        font-size: 32px;
        padding:5px;
    }

    .descripcion {
        color: #363732;
        text-align: center;
        margin:80px 5px 5px 5px;
        font-size:17px;
    }

    .informacion{
        display:flex;
        justify-content:space-evenly;
        flex-direction: column;
    }
    
    .grid-container{
    grid-template-rows: repeat(6,700px);
    }

    .titulo-img{
        font-size: 6vh;
    }
    .grid-feed{
        display:grid;
        grid-template-columns: 2fr;
        grid-template-rows: 500px 500px;
        margin:50px 50px 50px 50px;
        grid-gap:4em;
        overflow:hidden;
    }
    #mapa{
        grid-column: 1/1;
        grid-row:1/1;
    }
    #instagram-feed{
        width:50%;
        height:50%;
        grid-column:1/1;
        grid-row:2/2;
    }
}

@media only screen and (max-width: 800px) {
    .titulo-img{
        font-size: 8vh;
    }
    .grid-eventos{
        grid-template-rows: repeat(6,600px);
    }
}

@media only screen and (max-width: 375px) {
    .titulo-img{
        font-size: 7vh;
    }
    .grid-container{
        grid-template-rows: repeat(6,800px);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Kalam|Monoton|Montserrat|Playfair+Display|Ubuntu&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <title>Eventos Privados</title>
</head>
<body id="body-eventos">
    <header class="top_bar"> 
        
        <div class="btn-container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>

        <img src="imagenes/logo.png" class="logo">
        <div class="btn-header-container">
            <button id="delivery" class="btn_header">Delivery</button>
            <button id="btn_trabajo" class="btn_header">Trabajá con nosotros</button>
            <button id="btn_contacto" class="btn_header">Contacto</button>
            <a href="index.html" id="btn_eventos" class="btn_header">Home</a>
        </div>

    </header>

    <div class="grid-eventos">
        <div id="foto-ev-1" class="foto-ev"> </div>
        <div class="info-ev">
            <h2>Tu comodidad nos importa</h2>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat omnis hic magnam excepturi ducimus ut deserunt at itaque amet ullam cum saepe aperiam, consequatur quidem porro eaque ex. Accusantium consectetur ipsum, hic beatae nisi itaque, aperiam est ratione exercitationem veniam delectus quae earum amet dignissimos repellendus tempore sequi alias omnis magnam quibusdam error odio sint. Sint nesciunt expedita delectus vitae porro voluptatem non, inventore enim, quaerat nihil sequi? Perspiciatis maxime quasi ex iure repudiandae amet nemo tempora est corporis iusto, optio suscipit natus fugiat voluptas velit hic sint voluptatem delectus necessitatibus error neque quibusdam facilis deserunt. Magnam, alias perspiciatis. Minus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga minima maiores, necessitatibus ducimus porro praesentium vero impedit illo nisi repudiandae numquam omnis quasi adipisci excepturi et nulla consequatur, recusandae molestias.</p> 
        </div>

        <div id="foto-ev-2" class="foto-ev"> </div>
        <div class="info-ev">
            <h2>Tragos libres</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit pariatur voluptatibus in, perferendis corrupti earum iure sed ipsum adipisci eum praesentium, unde quo mollitia laborum officiis ea. Optio, ipsam accusantium distinctio magni iure soluta quaerat sequi quidem ullam nesciunt? Sunt eos illum nam dolores maiores. Vitae soluta laudantium fugit accusantium voluptatum. Et voluptatibus ducimus facere rem tenetur exercitationem voluptatem consequuntur quaerat. Unde placeat dolore corporis error, omnis eum quidem nihil voluptatum odit velit quo quisquam quam modi aperiam fugit non tempore inventore esse dolor officia? Eaque, vel deleniti magnam soluta at cum reiciendis nihil itaque laudantium fugiat laboriosam ex molestias? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo nobis aperiam non in minima inventore. Ratione deleniti quis rem itaque officiis quod neque tempore, impedit, ex delectus reprehenderit, numquam reiciendis.</p> 
        </div>

        <div id="foto-ev-3" class="foto-ev">  </div>
        <div class="info-ev">
            <h2>Servicio de catering</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem soluta corrupti sapiente vitae distinctio deserunt odit animi nemo laborum quaerat, explicabo velit suscipit modi consequatur. Vitae, voluptate. Hic, iusto. Necessitatibus nemo unde molestiae error eos facilis quae ex. Dolor, repudiandae eos earum odit nesciunt quisquam, ea officiis consequuntur impedit exercitationem adipisci ad expedita illo iste nostrum laborum eius fuga, quis neque deleniti doloremque natus assumenda cum? Explicabo voluptate nihil dolorum reiciendis ratione totam temporibus atque, est harum quibusdam nostrum eaque saepe nobis dicta quidem similique repellendus aut cumque culpa dolorem! Error id quidem earum. Mollitia incidunt nam quasi maxime optio. Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique explicabo iste, reprehenderit modi odit minima debitis rem? Dolores dolorem adipisci explicabo error deserunt labore pariatur impedit quas enim corrupti!</p> 
        </div>
    </div>

    <footer class="footer">
        <div>
            <p> Sprout Burger Co. <span> Av. Alem 400, BAHIA BLANCA, BS. AS, 8000, ARGENTINA [phone] [e-mail]</span></p><br>
            <p> &copy 2019 SPROUT BURGER</p>
        </div>
    </footer>
</body>
</html>

标签： javascripthtmlcss