阅读以下代码，实现平均绩点的计算，在右上角放置一个计算平均绩点按钮，用户点击后可以将已经输入得分并计算单科绩点的科目进行平均绩点的计算：<!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>