javascript - How to check if an entered answer is correct with HTML code?

I'm developing an escape room game for my students in Google Sites, and I have a problem with de HTML code. The goal is to enter a text answer in a text box and then check whether that answer is correct or not. If not correct, a message should appear warning this and the continue button should not be enabled; while in case the answer was correct, a message should appear congratulating them and unlock the button to continue.

I made a first version of the HTML code (see below) but it doesn't work for me, as I have problems in the if section.

Could someone please help me solve this? I am a science teacher, a novice in programming and due to COVID-19 I would like to implement something different for my students. Thank you very much in advance!

<head>
<title></title>


<script>
function checkAnswers(){
    Student_answer = document.f1.Student_answer.value
    Teacher_answer = "abc"

    if (Student_answer.length == 0 || Teacher_answer.length == 0) {
        alert("You must enter an answer to continue...");
        return false;
        }

    if (Student_answer == Teacher_answer) {
        alert("CONGRATULATIONS! Your answer is correct! You have advanced to the next level");
        //<button onclick="window.location.href = '';">Next Riddle</button>
        //NOTE: here is where the button should be activated and click on it to advance to an hyperlink 
        }

        else 
        {
        alert("Worng answer, please, keep trying...<br />");
        //NOTE: here the button must be disabled
        }

}
</script>
</head>
<body>

<h3>Write here your answer...</h3>
<br>

<form action="" name="f1">
Youy answer: <input type="password" name="clave1" size="20">
<br>
<br>
<input type="button" value="Check" onClick="checkAnswers()">

</form>
</body>
</html>```

I made a first version of the HTML code (see below) but it doesn't work for me, as I have problems in the if section.

<head>
<title></title>


<script>
function checkAnswers(){
    Student_answer = document.f1.Student_answer.value
    Teacher_answer = "abc"

    if (Student_answer.length == 0 || Teacher_answer.length == 0) {
        alert("You must enter an answer to continue...");
        return false;
        }

    if (Student_answer == Teacher_answer) {
        alert("CONGRATULATIONS! Your answer is correct! You have advanced to the next level");
        //<button onclick="window.location.href = 'https://www.google.';">Next Riddle</button>
        //NOTE: here is where the button should be activated and click on it to advance to an hyperlink 
        }

        else 
        {
        alert("Worng answer, please, keep trying...<br />");
        //NOTE: here the button must be disabled
        }

}
</script>
</head>
<body>

<h3>Write here your answer...</h3>
<br>

<form action="" name="f1">
Youy answer: <input type="password" name="clave1" size="20">
<br>
<br>
<input type="button" value="Check" onClick="checkAnswers()">

</form>
</body>
</html>```

Share Improve this question asked May 23, 2020 at 13:29 Martín Piña 691 gold badge1 silver badge7 bronze badges

Give id to your input field . Use document.getElementById("your_id").value . It should work for you . – Harmandeep Singh Kalsi Commented May 23, 2020 at 13:32
Student_answer = document.getElementsByName("clave1")[0].value; – Banzay Commented May 23, 2020 at 13:35
Check this : <input id="test" type="text"> <input type="button" onclick="check()" value="Submit"> <script> function check(){ console.log(document.getElementById("test").value); } – Harmandeep Singh Kalsi Commented May 23, 2020 at 13:41

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

This works.

<html>
  <head>
    <title></title>
    <script>
    function checkAnswers(){
        // The following is what I changed.
        Student_answer = document.querySelector('[name="clave1"]').value
        Teacher_answer = "abc"

        if (Student_answer.length === 0 || Teacher_answer.length === 0) {
            alert("You must enter an answer to continue...");
            return false;
        }

        if (Student_answer === Teacher_answer) {
            alert("CONGRATULATIONS! Your answer is correct! You have advanced to the next level.");
            document.body.innerHTML += '<button onclick="window.location.href = \'https://www.google.\';">Next Riddle</button>'
            //NOTE: here is where the button should be activated and click on it to advance to an hyperlink 
        } else {
            alert("Wrong answer, please, keep trying...");
            //NOTE: here the button must be disabled
        }

    }
    </script>
  </head>
  <body>

    <h3>Write here your answer...</h3>
    <br>

    <form action="" name="f1" onsubmit >
      Your answer: <input type="password" name="clave1" size="20">
      <br>
      <br>
      <input type="button" value="Check" onClick="checkAnswers()">

    </form>
  </body>
</html>

I also made some grammar and style fixes in your code.

Edit: I added the button functionality you asked about in your ment.

you just have a small issue in your HTML, while reading input with JS
Considering this HTML

<h3>Write here your answer...</h3>
<br>
<form name="f1">
  Your answer: <input type="password" name="studentAnswer" size="20">
  <br>
  <br>
  <input type="button" value="Check" onClick="checkAnswers()">

</form>

I've edited the name of the input, as you need to "select" it from JS using the name. So as you can see the input name is now studentAnswer, and that's how you reference it in your JS code, which I've edited as following

function checkAnswers() {
// document.$formName.$inputName
  Student_answer = document.f1.studentAnswer.value
  Teacher_answer = "abc"

  if (Student_answer.length == 0 || Teacher_answer.length == 0) {
    alert("You must enter an answer to continue...");
    return false;
  }

  if (Student_answer == Teacher_answer) {
    alert("CONGRATULATIONS! Your answer is correct! You have advanced to the next level");
    //<button onclick="window.location.href = 'https://www.google.';">Next Riddle</button>
    //NOTE: here is where the button should be activated and click on it to advance to an hyperlink 
  } else {
    alert("Worng answer, please, keep trying...<br />");
    //NOTE: here the button must be disabled
  }

}

I've kept it simple to avoid confusing you, great idea you had imho

Change,

Student_answer = document.f1.Student_answer.value

Student_answer = document.getElementsByName('clave1')[0].value

You can use getElementsByName() and get element via name attribute and can get the value..

function checkAnswers(){
    Student_answer = document.getElementsByName('clave1')[0].value
    Teacher_answer = "abc";
  const form = document.querySelector('form');
    if (Student_answer.length == 0 || Teacher_answer.length == 0) {
        alert("You must enter an answer to continue...");
        return false;
        }

    if (Student_answer == Teacher_answer) {
        alert("CONGRATULATIONS! Your answer is correct! You have advanced to the next level");
      form.innerHTML += 
        `<button onclick="window.location.href = 'https://www.google.';">Next Riddle</button>`
        //NOTE: here is where the button should be activated and click on it to advance to an hyperlink 
        }

        else 
        {
        alert("Worng answer, please, keep trying...<br />");
        //NOTE: here the button must be disabled
        }

}

<h3>Write here your answer...</h3>
<br>

<form action="" name="f1">
Youy answer: <input type="password" name="clave1" size="20">
<br>
<br>
<input type="button" value="Check" onClick="checkAnswers()">

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to check if an entered answer is correct with HTML code? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)