Input Text Boxes: I want to code three questions and output a text if it's the right or wrong answer. HTML & Javascript

deffy
September 18, 2023
229 views
3 votes
3 Answers

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

Tags: html javascript

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.

<!--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 correction1 = document.getElementById("answer1");

  function answer1() {
    let p = document.querySelector("h6");
    if (txt1.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 (txt2.value === "1") {
      p.innerHTML = "Good job! Proceed to the next question.";
    } else {
      p.innerHTML = "Try againn";
    }
  }

  const txt3 = document.getElementById("question3");
  const button3 = document.getElementById("btn3");
  const correction3 = document.getElementById("answer3");

  function answer3() {
    let p = document.querySelector("h4");
    if (txt3.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>

When you use document.querySelector("input") it always selects the first input element in the document. Instead, use the specific txt2 and txt3 variables you defined for the second and third questions:

const txt1 = document.getElementById("question1");
const button1 = document.getElementById("btn1");
const correction1 = document.getElementById("answer1");

function answer1() {
  let p = document.querySelector(".answer1"); // Use a class selector to target the correct answer element
  if (txt1.value === "no") { // Use txt1 to access the value of the first question's input
    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(".answer2"); // Use a class selector to target the correct answer element
  if (parseInt(txt2.value) === 1) { // Use txt2 to access the value of the second question's input and parse it as an integer
    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(".answer3"); // Use a class selector to target the correct answer element
  if (txt3.value.toLowerCase() === "barbie") { // Use txt3 to access the value of the third question's input and convert it to lowercase for case-insensitive comparison
    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);

I also changed your if statement. You were using = instead of ===. The single equal sign is for assignment, the triple one is for comparison.

- sshet
- September 12, 2023 at 2:06 pm
- 0 votes
0
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
```
var   questions = ["question1", "question2", "question3"]
var str = '<div>'

questions.forEach(function(i, question) {
str += '<label for='+ i+ '><br /></label>';
str += '<input type="text" id = '+ i+' placeholder = "Write your answer" maxlength="3"/>';
str += '<input type="button" id="btn" '+ i +'  value="Submit" />';

  str += '<h6 class="answer" '+ i+'  id="answer" ' + i + '></h6>';
  str += '<br/>';
}); 

str += '</div>';
document.getElementById("questionContainer").innerHTML = str;
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.