javascripthtmlinputbuttonclick

caught TypeError: Cannot read properties of null (reading 'value') at document.getElementById.onclick

i think, value of input field is not being read, and there is a problem with onclick method of submit button. when i press the submit button after running, nothing works, and this error is there -- caught TypeError: Cannot read properties of null (reading 'value') at document.getElementById.onclick. (by nothing works, i mean, the change of innerhtml of paragraph tag doesn't occur)

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

i ran this html with

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

this javascript.

i got this website-website

here, when i click, nothing happens.

if i open console to check errors, this error shows up-error

i have tried to make this website a couple more times- first, with

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

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.

then second, with this-

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

html and this-

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.

in both of these cases too, nothing happened on pressing the submit button

please assist

Solution

  • function genRandNo(a) why are you using this random will directly get a random number you don't need to use this

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

    instead of using function genRandNo(a) you can set random value directly in random function

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

    you are using onclick wrongly

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

    It's like this and just call the random function it will get random value

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

    here you are setting input value it's run with starting js and get input value which is empty and it will not change after it. So, use it in your submit button

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

    using switch is wrong use if-else-if because switch will just get number and will match it with cases in your case it will always run default.

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

    instead of this just use

    let guide = document.getElementById("guide")

    when you want to change it use this

    guide.innerHTML = 'something'

    I changed your js and added comment. instead of switch statement use 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>