I am working on a JavaScript problem,where i am taking 5 inputs from user and calculating the average and displaying it with the associated grade the user has obtained.My program is working fine,but it prints the average and grade on a new blank page instead of the same.I tried different things,but didn't work.Basically,i need my program to print on same page instead of new one.
<html>
<body>
<form>
Exam 1:<br>
<input type="text" id ="Exam1"><br>
Exam 2:<br>
<input type="text" id="Exam2"><br>
Exam 3:<br>
<input type="text" id="Exam3"><br>
Exam 4:<br>
<input type="text" id="Exam4"><br>
Exam 5:<br>
<input type="text" id="Exam5"><br>
</form>
<button id="averageButton">Calculate</button>
<script type"text/javascript">
function average(a,b,c,d,e){
return
(a*1+b*1+c*1+d*1+e*1)/5;
}
document.getElementById("averageButton").onclick =
function(){
var
a=parseInt(document.getElementById("Exam1").value);
var b=parseInt(document.getElementById("Exam2").value);
var
c=parseInt(document.getElementById("Exam3").value);
var d=parseInt(document.getElementById("Exam4").value);
var
e=parseInt(document.getElementById("Exam5").value);
document.write("Average: " + average(a,b,c,d,e)+
"<br>");
if (average(a,b,c,d,e) >= 90)
{
document.write("Grade : A");
} else if (average(a,b,c,d,e) >=
80) {
document.write("Grade : B");
} else if (average(a,b,c,d,e) >=
70) {
document.write("Grade : C");
}else if (average(a,b,c,d,e) >=
60) {
document.write("Grade : D");
} else {
document.write("Grade : F");
}
}
</script>
</body>
</html>
We create two <p> tags after the button and use them to show the average and grade.
SOURCE CODE IN HTML:
<!DOCTYPE html>
<html>
<body>
<form>
Exam 1:<br>
<input type="text" id ="Exam1"><br>
Exam 2:<br>
<input type="text" id="Exam2"><br>
Exam 3:<br>
<input type="text" id="Exam3"><br>
Exam 4:<br>
<input type="text" id="Exam4"><br>
Exam 5:<br>
<input type="text" id="Exam5"><br>
</form>
<button id="averageButton">Calculate</button>
<p id="average"></p>
<p id="grade"></p>
<script type"text/javascript">
function average(a,b,c,d,e){
return (a*1+b*1+c*1+d*1+e*1)/5;
}
document.getElementById("averageButton").onclick = function(){
var a=parseInt(document.getElementById("Exam1").value);
var b=parseInt(document.getElementById("Exam2").value);
var c=parseInt(document.getElementById("Exam3").value);
var d=parseInt(document.getElementById("Exam4").value);
var e=parseInt(document.getElementById("Exam5").value);
document.getElementById("average").innerHTML="Average: " + average(a,b,c,d,e);
if (average(a,b,c,d,e) >= 90) {
document.getElementById("grade").innerHTML="Grade : A";
} else if (average(a,b,c,d,e) >= 80) {
document.getElementById("grade").innerHTML="Grade : B";
} else if (average(a,b,c,d,e) >= 70) {
document.getElementById("grade").innerHTML="Grade : C";
}else if (average(a,b,c,d,e) >= 60) {
document.getElementById("grade").innerHTML="Grade : D";
} else {
document.getElementById("grade").innerHTML="Grade : F";
}
}
</script>
</body>
</html>
OUTPUT:

I am working on a JavaScript problem,where i am taking 5 inputs from user and calculating...