console getElementById возвращает null - PullRequest
Новая
       2

console getElementById возвращает null

0 голосов
/ 06 мая 2020

Хорошо, я пытаюсь добавить скрипт в свой HTML файл, но не смог. Я обнаружил, что когда я пытаюсь записать идентификаторы в консольный журнал, все они возвращают null. 

console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))

Итак, вот полный код моего HTML файла: 

console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))
<div class="container" id="forms">
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-left">
        <h2>Welcome Back!</h2>
        <p>Please login with your personal info</p>
        <button class="invert" id="signIn">Sign In</button>
      </div>
      <div class="overlay-right">
        <h2>Hello, Friend!</h2>
        <p>Please enter your personal details</p>
        <button class="invert" id="signUp">Sign Up</button>
      </div>
    </div>
  </div>
  <form class="sign-up" action="#">
    <h2>Create login</h2>
    <div>Use your email for registration</div>
    <input type="text" placeholder="Name" />
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>Sign Up</button>
  </form>
  <form class="sign-in" action="#">
    <h2>Sign In</h2>
    <div>Use your account</div>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <a href="#">Forgot your password?</a>
    <button>Sign Up</button>
  </form>
</div>

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

Вероятно, вы включаете тег <script> внутри тега <head>, поэтому сценарий выполняется до того, как элементы монтируются в DOM, и вызовы getElementById() возвращают null.

В этом случае вы можете переместить тег <script> внутри тега <body> в качестве его последнего дочернего элемента. Хотя это не гарантирует, что вся страница загружена перед запуском вашего скрипта, это гарантирует, что все элементы до нее будут вставлены в DOM.

Итак, вместо этого: 

<html>
    ...
    <script type="text/javascript">...</script>
<body>
    ...
</body>
</html>

Вы можете сделать это: 

<html>
    ...
<body>
    ...
    <script type="text/javascript">...</script>
</body>
</html>

Вы также можете дождаться события load из window перед запуском ваших скриптов (например, window.addEventListener('load', ...), что делает размещение тега <script> не имеет значения, но это может отложить ваше выполнение намного дольше, чем необходимо, поскольку он ожидает загрузки всех элементов, включая изображения или видео.

0 голосов
/ 06 мая 2020

Вы хотите убедиться, что ваша DOM загружена, чтобы вы могли получить доступ к элементам с помощью getElementById, иначе вы получите null в качестве вывода.

Я изменил ваш фрагмент на добавьте прослушиватель событий к событию Window load, которое будет выводить на консоль только вывод getElementById после загрузки всей страницы.

Подробнее о событии загрузки окна здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event 

window.addEventListener('load', (event) => {
  console.log(document.getElementById('forms'))
  console.log(document.getElementById('signIn'))
  console.log(document.getElementById('signUp'))
});
<div class="container" id="forms">
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-left">
        <h2>Welcome Back!</h2>
        <p>Please login with your personal info</p>
        <button class="invert" id="signIn">Sign In</button>
      </div>
      <div class="overlay-right">
        <h2>Hello, Friend!</h2>
        <p>Please enter your personal details</p>
        <button class="invert" id="signUp">Sign Up</button>
      </div>
    </div>
  </div>
  <form class="sign-up" action="#">
    <h2>Create login</h2>
    <div>Use your email for registration</div>
    <input type="text" placeholder="Name" />
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>Sign Up</button>
  </form>
  <form class="sign-in" action="#">
    <h2>Sign In</h2>
    <div>Use your account</div>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <a href="#">Forgot your password?</a>
    <button>Sign Up</button>
  </form>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...