这是我第一次上传一个js文件附加到HTML的脚本，它不工作。控制台显示功能"检查";如果无效，则"提交"。对象为空。不知道为什么，因为在Codepen上一切都运行得很好。我在这儿堵了好几个小时了，有人能帮我看看吗?
下面是我的javascript代码
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>出现问题是因为DOM树尚未构建，而您调用document.querySelector()
你可以使用DOMContentLoaded事件，当DOM被完全加载和解析时触发。
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
像这样:
function initPage() {
// your code here
}
document.addEventListener('DOMContentLoaded', initPage);