控制台getElementById返回null

Question

好的，我正在尝试将脚本添加到HTML文件中，但无法这样做。我发现当我尝试控制台登录ID时，它们都返回null。

所以这是我的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>

并且当我运行它时，它们都返回null：]

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

好的，我正在尝试将脚本添加到HTML文件中，但无法这样做。我发现当我尝试控制台登录ID时，它们都返回null。因此，这是我的HTML文件的完整代码：...