I have this big piece of code, that should calculate some numbers and make them green, if right answer, and red, if wrong answer.
I'm using bootstrap, and want to change class of some forms, so that they'll change color.
I've got a submit function, which calculates the input of some forms. But they keeps being red when clicking the button, cause the forms returns undefined.
I'll appreciate every kind of help! (I'm desperate)
Sorry about code being long.
<!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>
You cannot have a numeric ID. Add letters to it, like id="lbl1" instead of id="1".
And you should make these changes (replace input1 with inp1, etc...):
input1 = document.getElementById('inp1');
input2 = document.getElementById('inp2');
input3 = document.getElementById('inp3');
input4 = document.getElementById('inp4');
input5 = document.getElementById('inp5');
input1, input2 are divs, inp1, inp2 are inputs ...