我的 getElementId 为空(javascript 本机)

My getElementId is null (javascript native)

我认为我有一个愚蠢的问题,但我已经尝试了在网上找到的几个答案,但到目前为止没有任何效果。 我只想有一个 id=modal

代码如下:

   <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>

脚本:

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

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

和模态 return null,我无法得到 id.

我没看到你在哪里 inject/insert 你的脚本。

您必须 inject/insert 您的脚本位于 body 的底部,因为当您调用 document.getElementById 时,如果脚本位于顶部,则 html 是未加载,因此我们无法找到您的 ID,例如:

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