我有这么大的代码，它应该计算一些数字，如果答案正确，则将它们设为绿色，如果答案错误，则将它们设为红色。
我正在使用引导程序，并且想要更改某些表单的类，以便它们改变颜色。
我有一个提交函数，它可以计算某些表单的输入。但点击按钮时它们一直呈红色，导致表单返回未定义。
我将不胜感激各种帮助！ （我很绝望）
抱歉代码太长。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js-src/signup.js"></script>
<title>X Book</title>
<style type="text/css">
body {
text-align: center;
overflow: hidden;
margin: 0;
}
input {
width: 25% !important;
}
#forms1 {
margin-left: 35% !important;
}
</style>
<script type="text/javascript">
var label1, label2, label3, label4, label5;
var res1, res2, res3, res4, res5;
var op1, op2, op3, op4, op5;
var dig1, dig2, dig3, dig4, dig5, dig6, dig7, dig8, dig9, dig10;
var fail1, fail2, fail3, fail4, fail5;
var input1, input2, input3, input4, input5;
var rightCount;
var startDate, endDate;
var nameForm, mailForm;
function genNumb() {
label1 = document.getElementById('1');
label2 = document.getElementById('2');
dig1 = Math.floor((Math.random() * 25000) + 1);
dig2 = Math.floor((Math.random() * 25000) + 1);
dig3 = Math.floor((Math.random() * 25000) + 1);
dig4 = Math.floor((Math.random() * 25000) + 1);
op1 = Math.floor((Math.random() * 100) + 1);
op2 = Math.floor((Math.random() * 100) + 1);
res1;
res2;
label3 = document.getElementById('3');
label4 = document.getElementById('4');
dig5 = Math.floor((Math.random() * 25000) + 1);
dig6 = Math.floor((Math.random() * 25000) + 1);
dig7 = Math.floor((Math.random() * 25000) + 1);
dig8 = Math.floor((Math.random() * 25000) + 1);
op3 = Math.floor((Math.random() * 100) + 1);
op4 = Math.floor((Math.random() * 100) + 1);
res3;
res4;
label5 = document.getElementById('5');
dig9 = Math.floor((Math.random() * 25000) + 1);
dig10 = Math.floor((Math.random() * 25000) + 1);
op5 = Math.floor((Math.random() * 100) + 1);
res5;
if (op1 < 50) {
res1 = (dig1 - dig2);
label1.innerHTML = dig1 + " - " + dig2 + " ="
} else if (op1 > 50){
res1 = (dig1 + dig2);
label1.innerHTML = dig1 + " + " + dig2 + " ="
}
if (op2 < 50) {
res2 = (dig3 - dig4);
label2.innerHTML = dig3 + " - " + dig4 + " ="
} else if (op2 > 50){
res2 = (dig3 + dig4);
label2.innerHTML = dig3 + " + " + dig4 + " ="
}
// le 3 other ones:
if (op3 < 50) {
res3 = (dig5 - dig6);
label3.innerHTML = dig5 + " - " + dig6 + " ="
} else if (op3 > 50){
res3 = (dig5 + dig6);
label3.innerHTML = dig5 + " + " + dig6 + " ="
}
if (op4 < 50) {
res4 = (dig7 - dig8);
label4.innerHTML = dig7 + " - " + dig8 + " ="
} else if (op4 > 50){
res4 = (dig7 + dig8);
label4.innerHTML = dig7 + " + " + dig8 + " ="
}
if (op5 < 50) {
res5 = (dig9 - dig10);
label5.innerHTML = dig9 + " - " + dig10 + " ="
} else if (op5 > 50){
res5 = (dig9 + dig10);
label5.innerHTML = dig9 + " + " + dig10 + " ="
}
/*$.post('plus-minus.php', {
res1: res1,
res2: res2,
res3: res3,
res4: res4,
res5: res5
});*/
}
function FuncTest() {
alert("Yup");
}
window.onload = function() {
nameForm = localStorage.getItem('nameForm');
mailForm = localStorage.getItem('mailForm');
startDate = new Date();
genNumb();
}
function mySubmit() {
/*$.get('plus-minus.php', function(res1x, res2x, res3x, res4x, res5x){
res1 = res1x;
res2 = res2x;
res3 = res3x;
res4 = res4x;
res5 = res5x;
alert(res1, res2, res3, res4, res5)
});*/
input1 = document.getElementById('input1');
input2 = document.getElementById('input2');
input3 = document.getElementById('input3');
input4 = document.getElementById('input4');
input5 = document.getElementById('input5');
rightCount = 0;
if (input1.value == res1) {
rightCount =+ 1;
input1.className = "form-group has-success has-feedback";
} else {
alert(input1.value);
fail1 = input1;
input1.className = "form-group has-error has-feedback";
}
if (input2.value == res2) {
rightCount =+ 1;
input2.className = "form-group has-success has-feedback";
} else {
fail2 = input2;
input2.className = "form-group has-error has-feedback";
}
if (input3.value == res3) {
rightCount =+ 1;
input3.className = "form-group has-success has-feedback";
} else {
fail3 = input3;
input3.className = "form-group has-error has-feedback";
}
if (input4.value == res4) {
rightCount =+ 1;
fail4 = input4;
input4.className = "form-group has-success has-feedback";
} else {
input4.className = "form-group has-error has-feedback";
}
if (input5.value == res5) {
rightCount =+ 1;
input5.className = "form-group has-success has-feedback";
} else {
fail5 = input5;
input5.className = "form-group has-error has-feedback";
}
endDate = new Date();
postIt();
return false;
}
function postIt () {
$.post('sendmail.php', {
startTime: startDate,
endTime: endDate,
fa2il1: fail1,
fa2il2: fail2,
fa2il3: fail3,
fa2il4: fail4,
fa2il5: fail5,
result1: res1,
result2: res2,
result3: res3,
result4: res4,
result5: res5,
teMail: mailForm,
name: nameForm,
rightC: rightCount,
});
}
</script>
</head>
<body>
<div class="page-header">
<h1>
<small>X Book - Plus N' Minus</small>
</h1>
</div>
<div class="page-header" id="forms1">
<form class="form-horizontal" role="form">
<div class="form-group" id="input1">
<label oncopy="return false;" for="task1" class="col-sm-2 control-label" id="1"></label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Answer here" name="inp1" id="inp1">
</div>
</div>
<div class="form-group" id="input2">
<label oncopy="return false;" for="inputPassword3" class="col-sm-2 control-label" id="2"></label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Answer here">
</div>
</div>
<div class="form-group" id="input3">
<label oncopy="return false;" for="task1" class="col-sm-2 control-label" id="3"></label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Answer here">
</div>
</div>
<div class="form-group" id="input4">
<label oncopy="return false;" for="inputPassword3" class="col-sm-2 control-label" id="4"></label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Answer here">
</div>
</div>
<div class="form-group" id="input5">
<label oncopy="return false;" for="inputPassword3" class="col-sm-2 control-label" id="5"></label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Answer here">
</div>
</div>
</form>
</div>
<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
<p class="text-muted credit">Nonprofit virtual mathbook, X Book - by <a href="http://www.nilq-folio.com">Nilq</a>. For people who want to learn by them selves.
</div>
</nav>
</div>
<input type="button" class="btn btn-default btn-lg" id="submit" onclick="return mySubmit();" action="sendmail.php" data-toggle="modal" data-target="#signupModal" value="Submit">
</input>
<!-- Modal -->
<div id="signupModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Sent</h4>
</div>
<div class="modal-body">
<h5>Task details was sent to your teacher!</h5>
<div class="modal-footer"></div>
</div>
</div>
</div>
</div>
</body>
</html>
您不能拥有数字 ID。添加字母，例如
id="lbl1"id="1"您应该进行这些更改（将
input1inp1input1 = document.getElementById('inp1');
input2 = document.getElementById('inp2');
input3 = document.getElementById('inp3');
input4 = document.getElementById('inp4');
input5 = document.getElementById('inp5');
input1input2inp1inp2