'Why cant my JavaScript read null when I try to pass variables into the function?

I am working on a quiz script right now for an HTML web browser and when I try to pass variables to a function to hide an HTML element it says "quiz.html:105 Uncaught TypeError: Cannot read properties of null (reading 'style')" here's my code

let an1;
let an2;
let an3;
let an4;
let an5;

hide1()
hide2()
hide3()
hide4()
hide5()

function question1() {
    unhide1()
}

function s1() {
    an1 = document.getElementById("a1").value;
    an1 = an1.toLowerCase()
    if (an1 == "blue") {
        console.debug("Yasssss1");
        hide1()
        unhide2()
    } else {
        console.error("Nahhhhhh");
    }
}

function s2() {
    an2 = document.getElementById("a2").value;
    an2 = an2.toLowerCase();
    if (an2 == "both") {
        console.debug("Yasssss2")
        hide2()
        unhide3()
    } else {
        console.error("Nahhhhhh2")
    }
}

function s3() {
    an3 = document.getElementById("a3").value;
    an3 = an3.toLowerCase()
    if (an3 == "no") {
        console.debug("Yasssss3")
        hide3()
        unhide4()
    } else {
        console.error("Nahhhhhhh3")
    }
}

function s4() {
    an4 = document.getElementById("a4").value;
    an4 = an4.toLowerCase()
    if (an4 == "lacrosse") {
        console.debug("Yasssss4")
        hide4()
        unhide5()
    } else {
        console.error("Nahhhhhhh4")
    }
}

function s5() {
    an5 = document.getElementById("a5").value;
    an5 = an5.toLowerCase()
    if (an5 = "steak") {
        console.debug("Yasssss5")
        hide5()
        unhide1()
        unhide2()
        unhide3()
        unhide4()
        unhide5()
    } else {
        console.error("Nahhhhhhh5")
    }
}

function unhide(qnum, anum) {
    document.getElementById("qnum").style.display = "none";
    document.getElementById("anum").style.display = "none";
}

function hide(qnum, anum) {
    document.getElementById("qnum").style.display = "none";
    document.getElementById("anum").style.display = "none";
}

function unhide1() {
    unhide("q1", "a1")
}

function hide1() {
    hide("q1", "a1")
}

function unhide2() {
    unhide("q2", "a2")
}

function hide2() {
    hide("q2", "a2")
}

function unhide3() {
    unhide("q3", "a3")
}

function hide3() {
    hide("q3", "a3")
}

function unhide4() {
    unhide("q4", "a4")
}

function hide4() {
    hide("q4", "a4")
}

function unhide5() {
    unhide("q5", "a5")
}

function hide5() {
    hide("q5", "a5")
}

<p>Whats the best color?</p>

<p id="q2">Cats or Dogs?</p>
<input type="text" id="a2" onchange="s2()">

<p id="q3">Are you smart?</p>
<input type="text" id="a3" onchange="s3()">

<p id="q4">What is the best sport?</p>
<input type="text" id="a4" onchange="s4()">

<p id="q5">What is the best food?</p>
<input type="text" id="a5" onchange="s5()">

I've tried changing the syntax for the function and inside of the function and nothing is working for me I tried googleing my problem but that didnt help me. Does anyone know what I'm doing wrong?

javascript

Solution 1:^[1]

You are misspell of the variables of document.getElementById, the right way is to apply the variables rather than the string.

document.getElementById("qnum") => document.getElementById(qnum) document.getElementById("anum") => document.getElementById(anum)

Solution 2:^[2]

I assume the error is referring to these functions:

function unhide(qnum, anum){
    document.getElementById("qnum").style.display = "none";
    document.getElementById("anum").style.display = "none";
}
function hide(qnum, anum){
    document.getElementById("qnum").style.display = "none";
    document.getElementById("anum").style.display = "none";
}

The issue is with you passing the literal string "qnum" and "anum" instead of the variables, so the browser looks for elements with the ID qnum and anum, you should instead pass the variables (without the quotations):

function unhide(qnum, anum){
    document.getElementById(qnum).style.display = "none";
    document.getElementById(anum).style.display = "none";
}
function hide(qnum, anum){
    document.getElementById(qnum).style.display = "none";
    document.getElementById(anum).style.display = "none";
}

Solution 3:^[3]

There are a lot of things to say about your code ? I think there is something easier that this algorithm... Imagine that you have 1000 questions, what would you do? Will you create 1000 functions? Anyway, let’s check the error. Your browser is telling you that you didn’t select a correct html element. The arguments “a1” and “q1” you passed to your functions doesn’t exist in your html code. I think you forgot to add the id “a1” and “q1” to your first bloc:

<p id=“q1”>Whats the best color?</p>

<input type="text" id="a1" onchange="s1()">

Besides, right there: document.getElementById("qnum") etc.

you’re using a string instead of your variable. You should do this for all your document.get.elementById(qnum) etc. This would fix the bug.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	bcjohn
Solution 2	DaCurse
Solution 3

'Why cant my JavaScript read null when I try to pass variables into the function?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]