Cannot read property, trying to make an app asking user to enter age and name

Question

I am trying to ask a user to enter Name and Age, and then press a button to submit the values. The form accepts values and when user clicks submits, a function runs that changes from div1 i.e welcome to div2 i.e interface.

const button = document.querySelector("#but");
const errorDiv = document.querySelector("#errorDiv");
button.addEventListener("click", function() {
  errorDiv.style.color = "red";
  errorDiv.style.backgroundColor = "yellow";
  errorDiv.style.textAlign = "center";
  let name = document.querySelector("#name");
  let age = document.querySelector("#age");
  let number = age.value.trim();
  if (number == "") {
    errorDiv.innerHTML = `Sorry, you must enter a value in Age`;
    number.value = "";
  } else {
    if (isNaN(number)) {
      errorDiv.innerHTML = `Sorry, you did not enter a digit`;
      number.value = "";
    } else {
      if (document.getElementById('welcome')) {

        if (document.getElementById('welcome').style.display == 'none') {
          document.getElementById('welcome').style.display = 'block';
          document.getElementById('interface').style.display = 'none';
        } else {
          document.getElementById('welcome').style.display = 'none';
          document.getElementById('interface').style.display = 'block';
        }
      }
    }
  }
});

<div id="welcome">
  <br><br>
  <font size="7" color="white">
    <center>Welcome to Weakest Link</center>
  </font>
  <br><br>
  <font size="5" color="white" face="Times New Roman">
    <form id="details">
      <label>Name:</label><br>
      <input type="text" id="name" required></input><br><br><br>
      <label>Age</label><br>
      <input type="text" id="age" required></input><br>
      <br>
      <input type="button" value="Press me" id="but">
      <br>
      <br>

    </form>
  </font>
  <div id="errorDiv"></div>
</div>

I am getting error, TypeError: Cannot read property 'addEventListener' of null at https://replbox.repl.it/data/web_hosting_1/RohanJuneja/Assignment-3/js/script.js:61:8

I just want the javascript to accept values and save it to be used for the code i have to do later.

Answer 1

Your script is most likely running before your HTML code loads. To fix this:

Place your <script> tags before your closing </body> tag:

  <script>/* Scripts */</script>
</body>