我正在尝试执行以下操作-1( 创建一个从数据库中获取问题的测验2( 根据数据库中的正确响应检查用户的响应后打印出分数3( 在最终显示屏上保留用户的值。
php&js。PHP运行良好，但JS就是没有保留这些值。
参考代码-
<html>
<head>
<style type="text/css">
.End input[type="radio"]:checked + label {color: green;}
</style>
</head>
<body>
<form action = "" method="post" id="form">
<table>
<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "ugc";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{ die("Connection failed: " . $conn->connect_error); }
//Extract Data
$sql = "SELECT * FROM question_bank WHERE category = 'Maths' "; $result = $conn->query($sql);
$num_ques = 0;
$count = 0;
if ($result->num_rows > 0 && $num_ques <= 10)
{
// output data of each row
while($row = $result->fetch_assoc())
{
$id = $row["ID"];
$question = $row["Question"];
$a = $row["Option_A"];
$b = $row["Option_B"];
$c = $row["Option_C"];
$d = $row["Option_D"];
$correct = $row["Correct"];
$num_ques += 1;
$temp="G".$num_ques;
?>
<tr><td><?php echo $num_ques.") "; ?><td><?php echo $question; ?></td></tr>
<tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="a" id="first" />
<label for="first"><?php echo $a; ?></label><br/></td></tr>
<tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="b" id="second" />
<label for="second"><?php echo $b; ?></label><br/></td></tr>
<tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="c" id="third" />
<label for="third"><?php echo $c; ?></label><br/></td></tr>
<tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="d" id="fourth" />
<label for="fourth"><?php echo $d; ?></label><br/></td></tr>
<!-- <tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="d"><?php echo $d; ?></td></tr> -->
<tr><td><input type="hidden" name="correct<?php echo $num_ques; ?>" value="<?php echo $correct; ?>"></td></tr>
<?php } } else { echo "No results"; } $conn->close(); ?>
</table>
<input type="hidden" name="total_ques" value="<?php echo $num_ques; ?>">
<input type="submit" value="End" onSubmit = "return changeColor()">
</form>
<?php
$counter =0;
for ($i=1; $i <= $_POST["total_ques"]; $i++)
{
$c = "correct".$i;
$r = "G".$i;
$correct = $_POST[$c];
$response = $_POST[$r];
if ($correct == $response) {$counter+=1;}
}
echo "Your score = ".$counter;
?>
<script>
function changeColor()
{
form.classList.add("End");
return false;
}
</script>
</body>
</html>
1(它是onsubmit而不是onSubmit。
2(onsubmit事件仅适用于表单标记(参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event)
因此，您应该将onSubmit = "return changeColor()"重命名为onsubmit = "return changeColor()"，然后将其移动到form标记中。
此外，你不能只调用form.classList.add("End");，它会抛出undefined错误。这里的form是什么？它在这种情况下根本不存在。至少有两种方法可以做到这一点。
第一：在params 中传递表单对象
<form onsubmit="return someFunction(event, this)">
Enter name: <input type="text">
<input type="submit">
</form>
<script>
function someFunction(event, form) {
form.classList.add('abc');
return false; //whatever boolean you want, just an example
}
</script>
这里传递第一个参数，即事件对象。第二个参数是this，在这种情况下，它是表单的对象表示。在JS函数中，你可以处理这两个参数。我把我的第二个论点叫做form。现在我可以对引用我的表单的form参数执行操作了。
第二个对初学者来说更简单。只需给表单一个id，然后按id获取即可。
<form id="my-form" onsubmit="return someFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
<script>
function someFunction() {
let form = document.getElementById('my-form');
form.classList.add('my-class');
return false; //whatever boolean you want, just an example
}
</script>
这两个例子向你展示了你的罐头应该是什么样子。当然，你必须根据自己的需要采用它。
我不确定这是否能解决你所有的问题。但我相信这至少是其中的一部分。