我正在开展一个项目，其中在输入的表单中，我需要获取电子邮件 ID 的输入值并控制台记录它，因此在获取输入值时它会显示 Uncaught TypeError：无法读取 null 的属性（读取'addEventListener'）

这两个图像显示了获取输入值的 js 代码，另一个图像显示了页面中的错误

我希望我需要解决这个问题，我需要获取输入值

window.addEventListener('DOMContentLoaded', () => {
  let btn = document.querySelector('.btn');
  let Sign_email = document.querySelector('#Sign_email');
  const getInputvalue = () => {
    let userinput = Sign_email.value;
    console.log(userinput)
  }
  btn.addEventListener('click', getInputvalue)
})

<form method="POST" action="/sign" class="sign-in-form">
  <h2 class="title">Sign in</h2>
  <div class="input-field">
    <i class="fas fa-user"></i>
    <input name="Sign_email" id="Sign_email" type="email" placeholder="Email Id" />
  </div>
  <div class="input-field">
    <i class="fas fa-lock"></i>
    <input name="Sign_password" id="Sign_password" type="password" placeholder="Password" />
    <p id="error">Login again</p>
  </div>
  <input type="submit" value="Login" class="btn solid" />

</form>