Function shows void and cant run for unknown reason

Question

It's my first time uploading a js file attached to HTML's script, and it's not working. console said the function "check" is void, the "submit" object is null. Don't know why is that, cuz everything worked perfectly on Codepen. Had stuck here for hours, can anyone have a look for me, please.

Benlow is my javascrip code.

let idNumber = document.getElementById("idNumber");
let result = document.querySelector(".result");
let showResult = document.querySelector(".showResult");
let showPrize = document.querySelector(".showPrize");
let showPrize2 = document.querySelector(".showPrize2");
let showNumber = document.querySelector(".showNumber");
let showWarn = document.querySelector(".showWarn");
let submit = document.getElementById("submit");
console.log(submit === null);

function check() {
  let guess = idNumber.value;
  let guesson = guess[0];
  let lucky32 = guesson + 32;
  let funW2Paper = [guesson + 37, guesson + 76, guesson + 31, guesson + 06, guesson + 51, guesson + 65, guesson + 81];
  let moveW1 = [guesson + 97, guesson + 13, guesson + 19, guesson + 55, guesson + 71, guesson + 93, 381, 734, 644, 453, 985];
  let hakaW1 = [guesson + 81, 900];
  let localW1 = [081, 105, 594, 188, 089, 396, 521, 467, 912, 798, 358, 441, 367, 941, 335];
  showResult.textContent = "Sorry, no prize";
  showPrize.textContent = "";
  showWarn.textContent = "";
  showPrize2.textContent = "";
  if (guess === "") {
    showResult.textContent = "please enter a correct number";
    showPrize.textContent = "";
    showPrize2.textContent = "";
    showWarn.textContent = "";
  }

  for (let i = 0; i < 18; i++) {
    if (Number(guess) === Number(lucky32)) {
      showResult.textContent = "congratulations ";
      showPrize.textContent = "you win";
    } else if (Number(guess) === Number(funW2Paper[i])) {
      showResult.textContent = "congratulations ";
      showPrize.textContent = "you win";
    } else if (Number(guess) === Number(moveW1[i])) {
      showResult.textContent = "congratulations ";
      showPrize.textContent = "you win";
    } else if (Number(guess) === Number(hakaW1[i])) {
      showResult.textContent = "congratulations ";
      showPrize.textContent = "you win";
    } else if (Number(guess) === Number(localW1[i])) {
      showResult.textContent = "congratulations ";
      showPrize.textContent = "you win";
    }
  }
}

submit.addEventListener("click", check);
result.style.fontSize = "13px";

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title> 50000</title>
  <link rel="stylesheet" href="style_5000.css">
  <script src="5000.js"></script>
</head>

<body>

  <div class="box" style="width:350px; height:350px; background-color: #eee;">
    <div class="function">
      <p class="intro">Please enter 3 digi number. </p>
      <input type="text" id="idNumber" class="idNumber">
      <input type="button" id="submit" class="submit" value="submit"></input>
    </div>
    <div class="result">
      <p class="showResult"></p>
      <p class="showPrize"></p>
      <p class="showPrize2"></p>
      <p class="showWarn"></p>
    </div>

  </div>
</body>

</html>

See https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup — jarmod, Oct 20 '21 at 19:37
@Barmar this is the exact message `TypeError: submit is null file:///Users/joe/Desktop/hellow world/Test/5000.js:142` the loop and if the condition is longer in my file, I trim them to post it here. — Joe, Oct 20 '21 at 19:37
@Joe That's a completely different error than what you said in the question. — Barmar, Oct 20 '21 at 19:50

score 0 · Accepted Answer · answered Oct 20 '21 at 19:49

The problem occurs because your DOM tree is not built yet and you call document.querySelector()

You can use DOMContentLoaded event that fires when DOM is completely loaded and parsed.

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

something like this:

function initPage() {
  // your code here
}

document.addEventListener('DOMContentLoaded', initPage);

Function shows void and cant run for unknown reason

1 Answers1