<label for="chinese">中文成績：</label>
<input type="number" id="chinese"><br>

<label for="math">數學成績：</label>
<input type="number" id="math"><br>

<label for="english">英文成績：</label>
<input type="number" id="english"><br>

<button onclick="calculate()">計算平均成績</button>

<p id="result"></p>

<script>
function calculate() {
  // 獲取三科成績
  var chineseScore = document.querySelector("#chinese").value;
  var mathScore = document.querySelector("#math").value;
  var englishScore = document.querySelector("#english").value;

  // 計算平均成績
  var averageScore = (parseFloat(chineseScore) + parseFloat(mathScore) + parseFloat(englishScore)) / 3;

  // 根據及格與否設置文字顏色
  var resultElement = document.querySelector("#result");
  if (averageScore >= 60) {
    resultElement.style.color = "blue";
  } else {
    resultElement.style.color = "red";
  }

  // 顯示平均成績
  resultElement.textContent = "平均成績為：" + averageScore;
}
</script>