javascript 捕获到类型错误：无法读取document.getElementById.onclick处的null属性(阅读“value”)

6yoyoihd 于 2023-02-21 发布在 Java

关注(0)|答案(1)|浏览(153)

我认为，输入域的值没有被读取，并且提交按钮的onclick方法有问题.当我运行后按提交按钮时，什么都不起作用，并且这个错误在那里--捕获TypeError：无法读取document.getElementById.onclick处的null属性（读取"value"）。（没有任何效果，我的意思是，段落标记的innerhtml没有发生更改）

<!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>

我运行这个html

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");
    }
}

这个javascript。
我得到了这个网站-website
这里，当我点击，什么也没发生。
如果我打开控制台检查错误，该错误显示-error
我曾试图使这个网站几次以上-第一，与

<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>

html和这个-

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;
    }
}

javascript语言。
第二，用这个

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

html和这个-

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();

javascript语言。
在这两种情况下，按提交按钮时也没有发生任何事情
请协助

JavaScript

来源：https://stackoverflow.com/questions/75508173/caught-typeerror-cannot-read-properties-of-null-reading-value-at-document-g

1条答案

按热度按时间

bxfogqkk1#

函数genRandNo（a）为什么用这个random会直接得到一个随机数你不需要用这个

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

可以直接在随机函数中设置随机值，而不是使用函数genRandNo（a

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

你使用onclick是错误的

document.getElementById("genRand").onclick = genRandNo(randomNo);

就像这样，调用随机函数，它会得到随机值

document.getElementById("genRand").onclick = () => {random()};

这里你设置输入值，它是用启动js运行的，并获取输入值，它是空的，它不会改变，所以，在你的提交按钮中使用它

let input;
input=document.getElementById("inputNo").value;

使用switch是错误的，请使用if-else-if，因为switch只会获取number，并将其与您的情况进行匹配，它将始终运行default。

let guide = document.getElementById("guide").innerHTML;

而不是仅仅使用

let guide = document.getElementById("guide")

当你想改变它时使用这个

guide.innerHTML = 'something'

我改变了你的js并添加了注解。而不是开关语句使用if-else

// random num
let randomNo;

// generate random number
function random() {
let rand = Math.floor(Math.random()*10)+1
// seeting random number value
randomNo =rand
    return rand
}
// setting click on random number
document.getElementById("genRand").onclick=()=>{random();} 
// select guide where result will show 
let guide=document.getElementById("guide");
// set function on submit click
document.getElementById("submitNo").onclick=()=>{onSubmitNo();} 
// on sumbit function
function onSubmitNo() {
// getting input value here whenever submit will click it will get new value
let input = document.getElementById("inputNo").value;
// changing it into number in case of string
input = parseInt(input)
// check if number match the guess
if(input === randomNo){
   guide.innerHTML="you have guessed the correct number";
   // check if number greater than guess
} else if(input > randomNo){
    guide.innerHTML="guess a lower number";
     // check if number lesser than guess
} else if(input < randomNo){
 guide.innerHTML="guess a higher number";
 // in case of wrong output
} else {
     guide.innerHTML="you have guessed the wrong number"
}

}

<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>

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 捕获到类型错误：无法读取document.getElementById.onclick处的null属性(阅读“value”)

1条答案

相关问题

热门标签

最新问答