<!--ANSWER BOX1-->
<label for="question1"><br /></label>
<input
type="text"
id="question1"
placeholder="Write your answer"
maxlength="3"
/>
<input type="button" id="btn1" value="Submit" />
<h6 class="answer1" id="answer1"></h6>
<br />
<!--ANSWER BOX2-->
<label for="question2"><br /></label>
<input
type="number"
id="question2"
placeholder="Write your answer"
min="1"
max="13"
/>
<input type="button" id="btn2" value="Submit" />
<h5 class="answer" id="answer2"></h5>
<br />
<!--ANSWER BOX3-->
<label for="question3"><br /></label>
<input type="text" id="question3" placeholder="What is your name" />
<input type="button" id="btn3" value="Submit" />
<h4 class="answer3" id="answer3"></h4>
<br />
<script>
const txt1 = document.getElementById("question1");
const button1 = document.getElementById("btn1");
const correction = document.getElementById("answer1");
const input = document.querySelector("input");
function answer1() {
let p = document.querySelector("h6");
if (input.value === "no") {
p.innerHTML = "Good job! Proceed to the next question.";
} else {
p.innerHTML = "Try again";
}
}
const txt2 = document.getElementById("question2");
const button2 = document.getElementById("btn2");
const correction2 = document.getElementById("answer2");
function answer2() {
let p = document.querySelector("h5");
if ((input.value = 1)) {
p.innerHTML = "Good job! Proceed to the next question.";
} else {
p.innerHTML = "Try again";
}
}
const txt3 = document.getElementById("question3");
const button3 = document.getElementById("btn3");
const correction3 = document.getElementById("answer3");
function answer3() {
let p = document.querySelector("h4");
if ((input.value = "barbie")) {
p.innerHTML = "Homework complete. Congratulations!";
} else {
p.innerHTML = "Hi! Why are you doing Barbie's homework? 🧐";
}
}
button1.addEventListener("click", answer1);
button2.addEventListener("click", answer2);
button3.addEventListener("click", answer3);
</script>
I’m fairly new to Javascript and I want to write three questions and output a text if it’s right or wrong. In my case, it seems that only the first question is working but the two other questions are always outputting the if text even if there’s nothing written in the text box.
I want to put the const input value in the second and third question but it’s not working because I think it’s used for the first question.
Anyways, any help would be great!
3
Answers
You are using the same input variable for all three questions, which is why it’s not working as expected. You should have separate variables for each input element. I change the variable names for each input element to txt1, txt2, and txt3 for the first, second, and third questions, respectively. This ensures that you are using the correct input values for each question.
When you use
document.querySelector("input")
it always selects the first input element in the document. Instead, use the specifictxt2
andtxt3
variables you defined for the second and third questions:I also changed your
if
statement. You were using=
instead of===
. The single equal sign is for assignment, the triple one is for comparison.You can make use of appropriate variable names and adhere to standards which will not cause any run time issues . Don’t give 2 or 3 at the end of variable , use something like questionOne, questionTwo.
Instead of repeating same code for three different questions, you can create a two dimensional array and iterate in Dom to render this 3 questions . In for loop you can append to any div id .
https://onecompiler.com/html/3zmbqf999
sample