我正在为我的学生在Google Sites上开发一个密室逃脱游戏，我有一个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>```
这就可以了。
<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中出现了一个小问题，在用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
}
}
我把它简单化了，以免让你感到困惑，你的想法很好。
变化。
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()">