Когда я изменяю размер окна одного из моих листов, моя кнопка гамбургера не работает. Но это работает на моем первом листе (или первой странице)

Question

Я занимаюсь веб-проектом для изучения js, html и css. Эта веб-страница имеет титульную страницу (которую я не смог опубликовать здесь, потому что она разрешает только 1 html файл) и один раздел, называемый «частные события», который имеет свой собственный файл html, но он разделяет тот же файл css с вся веб-страница. Когда я изменяю размер страницы, верхнее меню должно оставаться скрытым, и кнопка гамбургера должна появляться с меню, отображаемым должным образом для меньшего windows. Он работает на первой странице, но на этом листе не работает.

В нем говорится: «Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' со значением null в main. js: 35« Я использую те же классы и идентификаторы, это не похоже на орфографическую ошибку, я не знаю, что это может быть. Чтобы было понятно, когда я открываю страницу в меньшем окне, меню исчезает (как и должно быть), появляется кнопка гамбургера (как и должно быть), но когда я нажимаю на нее, она не преобразуется в форму 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 (154) 385-3689 INFO@Sproutburger.com</span></p><br>
            <p> &copy 2019 SPROUT BURGER</p>
        </div>
    </footer>
</body>
</html>