如何使用 HTML 代碼檢查輸入的答案是否正確？

Question

我正在為 Google 協作平台中的學生開發一個密室逃脫游戲，但我遇到了 de HTML 代碼問題。 目標是在文本框中輸入文本答案，然后檢查該答案是否正確。 如果不正確，將出現一條消息警告這一點，並且不應啟用繼續按鈕； 如果答案是正確的，應該會出現一條消息，祝賀他們並解鎖按鈕以繼續。

我制作了 HTML 代碼的第一個版本（見下文），但它對我不起作用，因為我在 if 部分有問題。

有人可以幫我解決這個問題嗎？ 我是一名科學老師，是一名編程新手，由於 COVID-19，我想為我的學生實施一些不同的東西。 非常感謝您！

<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.com';">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>```

Answer 1

您的 HTML 中只有一個小問題，同時使用 JS 讀取輸入
考慮到這個 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>

我已經編輯了輸入的name ，因為您需要使用名稱從 JS 中“選擇”它。 如您所見，輸入名稱現在是studentAnswer ，這就是您在 JS 代碼中引用它的方式，我將其編輯如下

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.com';">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
  }

}

我保持簡單以避免混淆你，你有恕我直言的好主意

Answer 2

改變，

Student_answer = document.f1.Student_answer.value

至

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

您可以使用getElementsByName()並通過 name 屬性獲取元素，並且可以獲取值..

 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:com',">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()">

Answer 3

這行得通。

 <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:com\',">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>

我還在您的代碼中進行了一些語法和樣式修復。

編輯：我添加了您在評論中詢問的按鈕功能。

如何使用 HTML 代碼檢查輸入的答案是否正確？

問題描述

3 個解決方案

解決方案1
1 2020-05-23 13:37:12

解決方案2
1 2020-05-23 13:44:03

解決方案3
1 已采納 2020-05-23 13:49:37

如何使用 HTML 代碼檢查輸入的答案是否正確？

問題描述

3 個解決方案

解決方案1 1 2020-05-23 13:37:12

解決方案2 1 2020-05-23 13:44:03

解決方案3 1 已采納 2020-05-23 13:49:37

解決方案1
1 2020-05-23 13:37:12

解決方案2
1 2020-05-23 13:44:03

解決方案3
1 已采納 2020-05-23 13:49:37