Question

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

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>

0 0
Add a comment Improve this question Transcribed image text
Answer #1

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:

Add a comment
Know the answer?
Add Answer to:
I am working on a JavaScript problem,where i am taking 5 inputs from user and calculating...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT