我正在为我的学生开发一个逃生室游戏 在 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>```
这有效。
<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()">