How can I resolve this problem 'Cannot read property 'style' of null at HTMLBodyElement'?

JavaScript
1

Hello,
I’ve a navigation menu which dissappears when the breakpoint is 400px and icon bars appears. I added an eventListener and when I click on the icon I’ve my message in the console, but when I added if statements I’ve got an error message ‘Cannot read property ‘style’ of null at HTMLBodyElement’. I’ve already read similar questions but still I can’t resolve the problem.
I use parcell, so I’ve a script.js file with listeners and another js file in which I put this html and sass file. I made export and import, so it worked but with addEventListener it doesn’t work. I thaught that the page didn’t exist or wasn’t loaded before my eventListener. but I put this function and I got my message : document.addEventListener(“DOMContentLoaded”, function() {
console.log(‘ok’);
});

Thanks in advance for your help!

    .cont-menu-a{
        margin-top: 10%;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 35%;
        height: 62%;
        @media only screen and (max-width: $sm) {
          display : none;
        }
     }
      .fa-grip-lines{
        color: #212529;
        font-size: 2rem;
        margin-left: 5%;
        margin-top: 5%;
      @media only screen and (min-width: $sm) {  
        display : none;
     }}

<div class="about-page">
    <div class="sous-menu-burger">
        <i class="fas fa-grip-lines"></i>
    </div> 
  

      <div class="cont-main">
            <div class="cont-menu-a"> 
                <a href="#"><div class="home-a">Home</div></a>
                <a href="#"><div class="about-a">About</div></a>
                <a href="#"><div class="skills-a">Skills</div></a>
                <a href="#"><div class="projects-a">Projects</div></a>
                <a href="#"><div class="contacts-a">Contacts</div></a>
            </div>

    <div class="cont-text">
        <div class="titre">About</div>
        <div class="text">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. A repellat natus praesentium ratione ullam ipsa, perspiciatis consectetur, optio excepturi id cum maxime recusandae corrupti nihil. Illo deleniti eaque quod enim.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil laudantium optio ex nobis. Voluptatibus optio inventore doloremque. Perspiciatis temporibus ipsa quisquam expedita officiis? Nulla quod perferendis maiores repudiandae, vero eaque!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis earum a impedit, laborum magni fugit molestias, modi possimus quod hic consequuntur ad rem sed. Repudiandae, cupiditate perspiciatis! Pariatur, quia voluptatem.
        </div>
        </div>
    </div>
</div>

    const contSousmenu = document.querySelector('.cont-menu-a');
    
    document.body.addEventListener('click', function (e) {
      if (e.target.matches('.fa-grip-lines')) {
        console.log('toto'); 
        if (contSousmenu.style.display === 'none') {
          contSousmenu.style.display = 'block';
        } else {
          contSousmenu.style.display = 'none';
        }
      }
    });
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like