<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style type="text/css">
div{
margin: 10px auto;
width: 320px;
}
#test{
margin-left: 30px;
}
</style>
</head>
<body>
<div>
<button class="btn" id="fall">Fall</button>
<button class="btn" id="spring">Spring</button>
<button class="btn" id="summer">Summer</button>
<button id="test">Change the data</button>
<p id="output"></p>
</div>
<script type="text/javascript">
var midterm = +prompt("Enter midterm grade", "");
var finale = +prompt("Enter final grade", "");
var fall = document.getElementById("test");
var fall = document.getElementById("fall");
var spring = document.getElementById("spring");
var summer = document.getElementById("summer");
var output = document.getElementById("output");
function messageOutput(el, event, callback){
if(window.attachEvent){ //IE8
el.attachEvent('on' + event, callback);
} else {
el.addEventListener(event, callback);
}
</script></body></html>
messageOutput(fall, 'click', function(){
output.innerHTML = "";
var f = parseInt((2*midterm + finale)/3);
output.innerHTML = "Grade = " + f + "";
console.log(f);
});
messageOutput(spring, 'click', function(){
output.innerHTML = "";
var g = parseInt((midterm + 2*finale)/3);
output.innerHTML = "Grade = " + g + "";
});
messageOutput(summer, 'click', function(){
output.innerHTML = "";
var h = parseInt((midterm + finale)/2);
output.innerHTML = "Grade = " + h + "";
});
messageOutput(test, 'click', function(){
midterm = +prompt("Enter midterm grade", "");
finale = +prompt("Enter final grade", "");
});```html
```