数字猜谜游戏开发遇TypeError及按钮无响应问题求助

第一版代码问题与修复 #

错误现象 #

点击提交按钮无反应，控制台报错：caught TypeError: Cannot read properties of null (reading 'value') at document.getElementById.onclick

问题代码 #

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        </head>
    <body>
        <h1>number guessing game</h1>
        <input id="guessfield">
        <input type="submit" id="submitButton">
        <script src="numberGuessingGameScript.js"></script>
    </body>
</html>

JavaScript

const answer = Math.floor(Math.random() * 10 + 1);
document.getElementById("submitButton").onclick = function () {
    let guess = document.getElementById("guessField").value;
    if (guess==answer) {
        alert("correct answer");
    }
    else if (guess > answer) {
        alert("too high");
    }
    else {
        alert("too low");
    }
}

问题原因 #

HTML中输入框的ID是guessfield（全小写），但JS里获取元素时用了guessField（驼峰写法），ID大小写不匹配导致document.getElementById("guessField")返回null，无法读取value属性。另外输入值是字符串类型，直接和数字比较会有逻辑问题。

修复后的JavaScript #

const answer = Math.floor(Math.random() * 10 + 1);
document.getElementById("submitButton").onclick = function () {
    // 修正ID大小写，和HTML保持一致
    let guess = document.getElementById("guessfield").value;
    // 转换为数字类型，避免字符串比较错误
    guess = Number(guess);
    if (guess === answer) {
        alert("correct answer");
    } else if (guess > answer) {
        alert("too high");
    } else {
        alert("too low");
    }
}

第二版代码问题与修复 #

错误现象 #

点击生成按钮和提交按钮都无反应，段落标签内容不更新。

问题代码 #

HTML

<h1>number guessing game</h1>
<label for="genRand">Press This button to generate a random number between 1 and 10</label>
<button id="genRand">generate</button><br>
<label for="inputNo">enter a guess here</label>
<input id="inputNo" type="number" min="1" max="10" placeholder="1-10"><br>
<input type="submit" id="submitNo">
<p id="guide"></p>

JavaScript

function random() {
    return Math.floor(Math.random()*10+1)
}
let randomNo;
Number(randomNo)
function genRandNo(a) {
    Number(a)
    a=random()
}
document.getElementById("genRand").onclick = genRandNo(randomNo);
let input;
input=document.getElementById("inputNo").value;
Number(input);
let guide=document.getElementById("guide").innerHTML;
function onSubmitNo() {
    switch (true) {
        case input>randomNo:
            guide="guess a lower number";
            break;

        case input<randomNo:
            guide="guess a higher number";
            break;

        default:
            guide="you have guessed the correct number"
            break;
    }
}

问题原因 #

1. 点击事件绑定错误：document.getElementById("genRand").onclick = genRandNo(randomNo)是直接执行函数，而非绑定函数引用，导致页面加载时就调用了genRandNo，但点击按钮时无响应。
2. 变量赋值无效：genRandNo函数里的参数a是局部变量，修改它不会改变外部的randomNo；Number(randomNo)和Number(input)只是转换类型但没把结果赋值回去。
3. 输入值只读取一次：input=document.getElementById("inputNo").value在页面加载时执行，之后不会重新获取用户的最新输入。
4. DOM更新无效：guide变量只是存了innerHTML的初始值，修改它不会同步到页面，需要直接操作元素的innerHTML。
5. 提交按钮未绑定点击事件：submitNo按钮没有关联onSubmitNo函数，点击无反应。

修复后的JavaScript #

function random() {
    return Math.floor(Math.random()*10+1)
}
let randomNo;

// 绑定生成按钮的点击事件，直接传函数引用
document.getElementById("genRand").onclick = function() {
    randomNo = random();
    // 提示用户已生成随机数
    document.getElementById("guide").innerHTML = "随机数已生成，请输入猜测数字";
};

// 绑定提交按钮的点击事件
document.getElementById("submitNo").onclick = function() {
    // 每次点击时重新获取输入值并转为数字
    let input = Number(document.getElementById("inputNo").value);
    let guideElement = document.getElementById("guide");
    
    // 先判断是否生成了随机数，以及输入是否有效
    if (!randomNo) {
        guideElement.innerHTML = "请先点击生成按钮获取随机数";
        return;
    }
    if (isNaN(input) || input <1 || input>10) {
        guideElement.innerHTML = "请输入1-10之间的有效数字";
        return;
    }

    switch (true) {
        case input > randomNo:
            guideElement.innerHTML = "guess a lower number";
            break;
        case input < randomNo:
            guideElement.innerHTML = "guess a higher number";
            break;
        default:
            guideElement.innerHTML = "you have guessed the correct number";
            break;
    }
}

第三版代码问题与修复 #

错误现象 #

点击提交按钮无反应，段落标签内容不更新。

问题代码 #

HTML

<input type="text" inputmode="numeric" id="inputNo" placeholder="1-10">
<input type="submit" id="submitNo">
<p id="guide">hello</p>

JavaScript

function random() {
    return Math.floor(Math.random()*10+1)
}
let number = random();
let submit = document.getElementById("submitNo").onclick;
let guess = Number(document.getElementById("inputNo").value);
let guide = document.getElementById("guide").innerHTML;
function checkGuess() {
    switch (True) {
        case guess < number:
            guide = "too low";
            break;
        case guess > number:
            guide = "too high";
            break;
        default:
            guide = "correct guess";
            break;
    }
}
submit = checkGuess();

问题原因 #

1. 点击事件绑定错误：submit = checkGuess()是直接执行函数，没有把checkGuess绑定到按钮的点击事件上，正确的做法是把函数赋值给onclick。
2. 输入值只读取一次：guess = Number(document.getElementById("inputNo").value)在页面加载时获取初始值，点击按钮时不会重新获取用户的最新输入。
3. DOM更新无效：修改guide变量不会同步到页面，需要直接设置元素的innerHTML。
4. switch条件错误：JS里布尔值是小写的true，不是大写的True，大写的True会被当作未定义变量。

修复后的JavaScript #

function random() {
    return Math.floor(Math.random()*10+1)
}
let number = random();

// 绑定提交按钮的点击事件
document.getElementById("submitNo").onclick = checkGuess;

function checkGuess() {
    // 每次点击时重新获取最新输入值
    let guess = Number(document.getElementById("inputNo").value);
    let guideElement = document.getElementById("guide");
    
    // 验证输入有效性
    if (isNaN(guess) || guess <1 || guess>10) {
        guideElement.innerHTML = "请输入1-10之间的有效数字";
        return;
    }

    switch (true) {
        case guess < number:
            guideElement.innerHTML = "too low";
            break;
        case guess > number:
            guideElement.innerHTML = "too high";
            break;
        default:
            guideElement.innerHTML = "correct guess";
            break;
    }
}

内容的提问来源于stack exchange，提问作者Rishit Bhardwaj