<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navabar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted;"/> <div class="col-md-4"> <div class="form-group"> <input type="number" id="grade1" onkeyup="calculateAve();" class="form-control"/> </div> <div class="form-group"> <input type="number" id="grade2" onkeyup="calculateAve();" class="form-control"/> </div> <div class="form-group"> <input type="number" id="grade3" onkeyup="calculateAve();" class="form-control"/> </div> </div> <div class="col-md-4"> <div class="form-inline"> <input type="text" class="form-control" id="result" readonly="readonly"/> </div> </div> </div> </body> </html>
function calculateAve(){ var grade1=document.getElementById('grade1').value; var grade2=document.getElementById('grade2').value; var grade3=document.getElementById('grade3').value; var total; var ave; if(grade1 !="" && grade2 !="" && grade3 !=""){ total=parseInt(grade1)+parseInt(grade2)+parseInt(grade3); ave=total/3 document.getElementById('result').value=ave.toFixed(0); } }