Прежде всего ваши переменные cg и gof являются опечатками и вместо них должны быть pg и fg соответственно.
Также ваша функция computeGrade() уже закрыта с } прямо перед тем, как вы определили let csp;, вы должны удалить эту закрывающую скобку.
Тогда функция outputGrade() нигде не вызывается. он должен быть вызван сразу после его определения. Хотя это также пустая трата кода, просто исключите эту функцию и используйте одну функцию computeGrade(), которая выполняет всю работу
Также ваши теги input имеют закрывающие теги </input>, что неправильно, правильный формат - <input/>, все, что было описано в приведенном ниже коде
Затем для ввода введите onkeyup, чтобы получить более наглядный вывод, но если это ваше предпочтение, onchange обновит результаты только при переходе к другому вводу, код ниже меняет вывод при каждом изменении значений в полях ввода, а не при изменении фокуса поля ввода, на котором вы пишете:
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="csp.css" />
<script>
function computeGrade() {
var pg = document.getElementById("pg").value;
var fg = document.getElementById("fg").value;
var wof = document.getElementById("wof").value;
var og = (pg * (1 - (wof / 100)) + (fg * (wof / 100)))
var prettyOg = og.toFixed(2)
document.getElementById("og").innerHTML = "Overall Grade: " + prettyOg + "%";
let csp;
if (og > 90) {
csp = "you have an A!";
} else if (og > 80) {
csp = "you have a B!";
} else if (og > 70) {
csp = "you have a C!";
} else if (og > 60) {
csp = "you have a D!";
} else {
csp = "you are failing...";
}
document.getElementById("cs").innerHTML = csp;
}
</script>
</head>
<body>
<h1>Overall Grade Calculator</h1>
<p>Current grade:
<input id="pg" min="1" max="120" onkeyup="computeGrade()"/>
</p>
<p>
Grade on Final:
<input id="fg" min="1" max="120" onkeyup="computeGrade()"/>
</p>
<p>Final weight:
<input id="wof" min="1" max="100" onkeyup="computeGrade()"/>
</p>
<p>
<button>Submit</button>
</p>
<h2 id="og"></h2>
<h3 id="cs"></h3>
</body>
</html>```