阅读以下代码，完善代码，要求能实现实时的平均绩点计算：!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="myStyles.css" rel="stylesheet" type="text/css">
<script>
function calculateGPA(course) {
  var score = document.getElementById("score_"+course).value;
  var gpa = calculateScoreGPA(score);
  document.getElementById("gpa_"+course).innerText = gpa;
}

	


function calculateScoreGPA(score) {
  if (score >= 90) {
    return 4.0;
  } else if (score >= 85) {
    return 3.7;
  } else if (score >= 82) {
    return 3.3;
  } else if (score >= 78) {
    return 3.0;
  } else if (score >= 75) {
    return 2.7;
  } else if (score >= 72) {
    return 2.3;
  } else if (score >= 68) {
    return 2.0;
  } else if (score >= 66) {
    return 1.7;
  } else if (score >= 64) {
    return 1.3;
  } else if (score >= 60) {
    return 1.0;
  } else {
    return 0.0;
  }
}</script>
	
</head>

<body>

<h1>特色化示范性软件学院(试验班)教学计划</h1>
<button class="accordion">2022-2023学年 第一学期</button>
<div class="panel">
<table width="1595" border="1">
  <tbody>
    <tr>
      <th width="301" scope="col">课程名称</th>
      <th width="172" scope="col">学分</th>
      <th width="382" scope="col">参考教材</th>
      <th width="270" scope="col">得分</th>
      <th width="436" scope="col">绩点</th>
    </tr>
    <tr>
      <td>自然科学导引</td>
      <td>2</td>
      <td><img src="../Desktop/BP/image/u=4027674499,1986371212&fm=253&fmt=auto&app=138&f=JPEG.jpg" alt=""/></td>
    <td>
     <input type="number" id="score_course1" />
     <button onclick="calculateGPA('course1')">计算绩点</button>
     </td>
    <td><span id="gpa_course1"></span></td>
    </tr>
    <tr>
      <td>思想道德与法治</td>
      <td>3</td>
      <td><img src="../Desktop/BP/image/u=1527279609,972791858&fm=253&fmt=auto&app=138&f=PNG.jpg" alt=""/></td>
     <td>
		  <input type="number" id="score_course2" />
      <button onclick="calculateGPA('course2')">计算绩点</button>
		</td>
      <td><span id="gpa_course2"></span></td>
    </tr>
    <tr>
      <td>形势与政策</td>
      <td>0.5</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course3" />
      <button onclick="calculateGPA('course3')">计算绩点</button>
		</td>
      <td><span id="gpa_course3"></span></td>
    </tr>
    <tr>
      <td>体育</td>
      <td>0.5</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course4" />
      <button onclick="calculateGPA('course4')">计算绩点</button>
		</td>
      <td><span id="gpa_course4"></span></td>
    </tr>
    <tr>
      <td>大学英语</td>
      <td>1.5</td>
      <td><img src="../Desktop/BP/image/u=1272951287,3636485637&fm=253&fmt=auto&app=138&f=JPEG.jpg" alt=""/></td>
     <td>
		  <input type="number" id="score_course5" />
      <button onclick="calculateGPA('course5')">计算绩点</button>
		</td>
      <td><span id="gpa_course5"></span></td>
    </tr>    
	<tr>
      <td>高等数学A1</td>
      <td>6</td>
      <td><img src="../Desktop/BP/image/a73b45b7cc77aa8827385593832895e0.jpg" width="800" height="800" alt=""/></td>
     <td>
		  <input type="number" id="score_course6" />
      <button onclick="calculateGPA('course6')">计算绩点</button>
		</td>
      <td><span id="gpa_course6"></span></td>
    </tr>
	<tr>
      <td>程序设计</td>
      <td>4</td>
      <td><img src="../Desktop/BP/image/下载 (1).jpg" width="348" height="499" alt=""/></td>
     <td>
		  <input type="number" id="score_course7" />
      <button onclick="calculateGPA('course7')">计算绩点</button>
		</td>
      <td><span id="gpa_course7"></span></td>
    </tr>
	<tr>
      <td>专业导论</td>
      <td>1</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course8" />
      <button onclick="calculateGPA('course8')">计算绩点</button>
		</td>
      <td><span id="gpa_course8"></span></td>
    </tr>
	<tr>
      <td>军事理论与技能</td>
      <td>4</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course9" />
      <button onclick="calculateGPA('course9')">计算绩点</button>
		</td>
      <td><span id="gpa_course9"></span></td>
    </tr>
  </tbody>
</table>

</div>
 
<button class="accordion">2022-2023学年第二学期</button>
<div class="panel">
<table width="1613" border="1">
  <tbody>
    <tr>
      <th width="301" scope="col">课程名称</th>
      <th width="172" scope="col">学分</th>
      <th width="382" scope="col">参考教材</th>
      <th width="270" scope="col">得分</th>
      <th width="454" scope="col">绩点</th>
    </tr>
    <tr>
      <td>人文社科导引</td>
      <td>2</td>
      <td><img src="../Desktop/BP/image/下载.jpg" width="359" height="499" alt=""/></td>
     <td>
		  <input type="number" id="score_course10" />
      <button onclick="calculateGPA('course10')">计算绩点</button>
		</td>
      <td><span id="gpa_course10"></span></td>
    </tr>
    <tr>
      <td>马克思主义基本原理</td>
      <td>3</td>
      <td><img src="../Desktop/BP/image/u=1918858133,2268544293&fm=253&fmt=auto&app=138&f=JPEG.jpg" alt=""/></td>
     <td>
		  <input type="number" id="score_course11" />
      <button onclick="calculateGPA('course11')">计算绩点</button>
		</td>
      <td><span id="gpa_course11"></span></td>
    </tr>
    <tr>
      <td>中国近现代史纲要</td>
      <td>3</td>
      <td><img src="../Desktop/BP/image/u=1775126392,2082583838&fm=253&fmt=auto&app=138&f=JPEG.jpg" alt=""/></td>
     <td>
		  <input type="number" id="score_course12" />
      <button onclick="calculateGPA('course12')">计算绩点</button>
		</td>
      <td><span id="gpa_course12"></span></td>
    </tr>
	  
	<tr>
      <td>形势与政策</td>
      <td>0.5</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course13" />
      <button onclick="calculateGPA('course13')">计算绩点</button>
		</td>
      <td><span id="gpa_course13"></span></td>
    </tr>
    <tr>
      <td>体育</td>
      <td>0.5</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course14" />
      <button onclick="calculateGPA('course14')">计算绩点</button>
		</td>
      <td><span id="gpa_course14"></span></td>
    </tr>
    <tr>
      <td>大学英语</td>
      <td>1.5</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course15" />
      <button onclick="calculateGPA('course15')">计算绩点</button>
		</td>
      <td><span id="gpa_course15"></span></td>
    </tr>  
    <tr>
      <td>大学生心理健康</td>
      <td>2</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course16" />
      <button onclick="calculateGPA('course16')">计算绩点</button>
		</td>
      <td><span id="gpa_course16"></span></td>
    </tr>
    <tr>
      <td>高等数学A2</td>
      <td>6</td>
      <td><img src="../Desktop/BP/image/.jpeg" width="500" height="500" alt=""/></td>
     <td>
		  <input type="number" id="score_course17" />
      <button onclick="calculateGPA('course17')">计算绩点</button>
		</td>
      <td><span id="gpa_course17"></span></td>
    </tr>
    <tr>
      <td>线性代数A</td>
      <td>3</td>
      <td><img src="../Desktop/BP/image/u=1665676147,639385142&fm=253&fmt=auto&app=138&f=JPEG.jpg" alt=""/></td>
     <td>
		  <input type="number" id="score_course18" />
      <button onclick="calculateGPA('course18')">计算绩点</button>
		</td>
      <td><span id="gpa_course18"></span></td>
    </tr>
	<tr>
      <td>离散数学</td>
      <td>4</td>
      <td><img src="../Desktop/BP/image/f9144da186a132ef51112ebfa8925434.jpg" width="800" height="800" alt=""/></td>
     <td>
		  <input type="number" id="score_course19" />
      <button onclick="calculateGPA('course19')">计算绩点</button>
		</td>
      <td><span id="gpa_course19"></span></td>
    </tr>
	<tr>
      <td>遥感原理与应用</td>
      <td>2.5</td>
      <td><img src="../Desktop/BP/image/38be83ff15039adc2513f777eda14b37.jpg" width="800" height="1132" alt=""/></td>
     <td>
		  <input type="number" id="score_course20" />
      <button onclick="calculateGPA('course20')">计算绩点</button>
		</td>
      <td><span id="gpa_course20"></span></td>
    </tr>
	<tr>
      <td>大学物理B</td>
      <td>3.5</td>
      <td>&nbsp;</td>
     <td>
		  <input type="number" id="score_course21" />
      <button onclick="calculateGPA('course21')">计算绩点</button>
		</td>
      <td><span id="gpa_course21"></span></td>
    </tr>
  </tbody>
</table>

</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>
	
	
	
	
</body>
</html>