Question

我认为我有一个愚蠢的问题，但我已经在网上找到了几个答案，到目前为止没有任何作用。我只想要一个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');
}

模态返回null，我无法获得id。

Answer 1

我没有看到您注入/插入脚本的位置。

你必须在你的身体底部注入/插入你的脚本，因为当你调用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>

我的getElementId为null（javascript native）

1 个答案: