Я не могу получить доступ к элементам html, используя document.getElementById?

Question

Когда я пытаюсь получить свои элементы из моего html файла, используя document.getElementById, я получаю нулевое значение для всех трех константных переменных

Ниже приведено начало моего js файла:

    const postBtn1 = document.getElementById("post-btn1");
    const postBtn2 = document.getElementById("post-btn2");
    const postBtn3 = document.getElementById("post-btn3");

Ниже приводится начало моего html файла и раздела, содержащего кнопки:

<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/icomoon.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/money-request.js"></script> <!-- this is the js file I'm using for this part -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>

Answer 1

Файл JS выполняется сразу после его загрузки (до визуализации кнопок HTML.)

Убедитесь, что код доступа к кнопке заключен в блок загрузки:

window.onload = function() {
  const postBtn1 = document.getElementById("post-btn1");
  const postBtn2 = document.getElementById("post-btn2");
  const postBtn3 = document.getElementById("post-btn3");

  console.log(postBtn1);
};

Это обеспечивает выполнение кода внутри функционального блока только после полной визуализации страницы html, и они больше не будут иметь значение null.

Чтобы узнать больше об этом, ознакомьтесь с https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload