我无法使用 document.getElementById 访问 html 元素？

Question

When I am tryin to get my elements from my html file using document.getElementById , I get null for all three const variables

The following is the beginning of my js file:

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

The following is the beginning of my html file and section containing the buttons:

<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

The JS file is executed right away after it is loaded (Before the HTML buttons are rendered.)

Make sure you wrap your button access code inside an onload block:

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

  console.log(postBtn1);
};

This ensures the code inside the function block is only executed after the html page is fully rendered and they won't be null anymore.

To learn more about this, check out https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload