Search code examples
javascriptdombulma

My getElementId is null (javascript native)

I have a silly problem I think, but I've tried several answers found on the net and nothing works so far. I'd just like to have an id=modal

Here's the code: 

   <html lang="fr">
      <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Le Cabinet</title>
      <link rel="shortcut icon" href="img/logo-min.png">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
      awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" 
     href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
      <link rel="stylesheet" href="css/style-sheet.css">
      <link rel="stylesheet" href="css/mystyles.scss">
      </head>
         <body>
          <main>
            <div class="container">
              <section class="columns"> 
                <div>
                 <button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
                  <div id="modal" class="modal">
                    <div class="modal-background"></div>
                    <div class="modal-card">
                      <section class="modal-card-body">
                        <p class="modal-card-title modal__title"></p>
                      </section>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </main>
        </body>
 <script type="text/javascript" src="js/burger.js"></script>

</html>

script:

const modal = document.getElementById('modal');
console.log('modal', modal);

function toggleClass() {
  modal.classList.toggle('is-active');
}

And modal return null,I can't get the id.

enter image description here

Solution

  • I don't see where you inject/insert your script.

    You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :

    <html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- My super html -->
    <script src="path/to" type="text/javascript"></script>
  </body>
</html>