I am having issues with my code for a basic grade calculator. Even though I can input numbers, the final grade is not displayed on the screen. Can someone please help me identify what mistake I might be making? Please ignore the Japanese text, as it's just instructions for my students who are Japanese learners.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>English 1B</title>
<script>
function computeGrade() {
var q1=document.getElementById('q1').value;
var q2=document.getElementById('q2').value;
var q3=document.getElementById('q3').value;
var es1=document.getElementById('es1').value;
var es2 =document.getElementById('es2').value;
var es3 =document.getElementById('es3').value;
var a=document.getElementById('a').value;
var average = ((q1+q2+q3)/192*.25 + (es1+es2+es3)/50*.55 + a/14*.2)*100);
document.getElementById('average').innerHTML = "Your average is" + average + "%.";}
</script>
</head>
<body>
<h2>Grade Calculation</h2>
<p>Quiz 1 score: <input id="q1" type="number" onchange="computeGrade()"></p>
<p>Quiz 2 score: <input id="q2" type="number" onchange="computeGrade()"></p>
<p>Quiz 3 score: <input id="q3" type="number" onchange="computeGrade()"></p>
<p>Elevator Speech 1 score: <input id="es1" type="number" onchange="computeGrade()"></p>
<p>Elevator Speech 2 score: <input id="es2" type="number" onchange="computeGrade()"></p>
<p>Elevator Speech 3 score: <input id="es3" type="number" onchange="computeGrade()"></p>
<p>Attendance count: <input id="a" type="number" onchange="computeGrade()"></p><br>
<p id = "average"></p>
</body>
</html>