流程

1.先觀察畫面，哪些值需要抓
2.抓HTML的值：
a.先宣告變數，變數就是抓HTML的值，也可以說變數取代HTML的值之後用變數做程式的處理。
例：const 變數名稱 = document.getElementById(html id的值);

範例code如下：

// 成績計算表單
const scoreForm = document.getElementById('scoreForm');
// 各科目分數輸入框
const zhInput = document.getElementById('chineseScoreInput');
const enInput = document.getElementById('englishScoreInput');
const mathInput = document.getElementById('mathScoreInput');
// 報告顯示區塊
const reportDiv = document.getElementById('result');

3.抓form的值或按鈕的值，去做監聽，在想流程怎麼做
4.按照流程做：
a.取得各科目成績：宣告變數去存入成績，成績數值要轉換成數字才能做運算
b.計算總分：宣告加總變數等於三個成績加起來
c.計算平均分數：宣告加總的成績除以3
d.計算等級

scoreForm.addEventListener('submit', function (e) {
   // 防止表單重整畫面
   e.preventDefault();
   console.log("表單被送出了");
   // 取得各科目成績
   const zh = parseInt(zhInput.value),
         en = parseInt(enInput.value),
         math = parseInt(mathInput.value);

   // 計算總分
   const sum = zh +en + math;
   console.log("總分", sum);

   // TODO: 計算平均分數
   const avg = Math.round(sum / 3 * 100) / 100;
   console.log("avg",avg);
   
   // TODO: 計算等級
   // 平均分數 >= 90 為A+
   // 平均分數 >= 80 為A
   // 平均分數 >= 70 為B
   // 平均分數 >= 60 為C
   // 平均分數 < 60 為F。
   let gpa;
   let color = "secondary";
   if (avg >= 90) {
       gpa = "A+";
       color = "success";
   } else if (avg >= 80) {
       gpa = "A";
   } else if (avg >= 70) {
       gpa = "B";
   } else if (avg >= 60) {
       gpa = "C";
   } else {
       gpa = "F";
       color = "danger";
   }

   // TODO: 顯示報告
   const report = `<div class="alert alert-${color}">
       國文: ${zh} <br>
       英文: ${en} <br>
       數學: ${math} <br>
       總分: ${sum} <br>
       平均分數: ${avg}
       總評: ${gpa}
   </div>`;
   reportDiv.innerHTML = report;

});

重點語法小筆記

e.preventDefault(); 防止表單重整畫面
const avg = math.round(sum / 3 * 100) / 100; 四捨五入到小數點第二位