JS计算学生平均成绩等级无法正常输出到网页的问题求解

你的代码无法在网页展示结果是几个明确的写法问题导致的：

• 等级赋值错误：console.log()的作用是在控制台打印内容，返回值固定为undefined，你把这个返回值赋给result，自然拿不到A/B/C/D/F的字符串
• 函数名不匹配：HTML按钮绑定的点击事件是myGrades()，但JS中定义的函数名为jsGrades()，点击按钮无法触发对应逻辑
• 错误递归：你在jsGrades函数内部调用了jsGrades()本身，没有终止条件会导致无限递归，页面直接卡死
• 冗余错误绑定：HTML中body标签绑定了loadContent()的加载事件，但你根本没有定义这个函数，会直接抛出JS错误
• 平均分计算硬编码：已经定义了成绩数组myJSTestResults，计算平均分时却手动写了数值求和，后续修改成绩不会同步更新平均分

HTML部分 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h1>学生成绩评分器</h1>
   <br>
   <div id="myGrades">
      <button onclick="showGrade()">计算成绩等级</button>
   </div>
   <script src="./arraytask.js"></script>
</body>
</html>

JavaScript部分（arraytask.js） #

const myJSTestResults = [40, 15, 55, 70, 80];
// 动态计算数组平均分，无需硬编码数值
const average = myJSTestResults.reduce((sum, score) => sum + score, 0) / myJSTestResults.length;
const gradeDom = document.getElementById('myGrades');

function showGrade() {
  let result = '';
  // 直接给结果变量赋值等级字符串
  if (average >= 80 && average <= 100) {
    result = 'A';
  } else if (average >= 70) {
    result = 'B';
  } else if (average >= 60) {
    result = 'C';
  } else if (average >= 50) {
    result = 'D';
  } else {
    result = 'F';
  }
  // 控制台打印仅做调试用，不参与赋值
  console.log('当前成绩等级：', result);

  // 避免重复点击重复插入结果
  const existResult = document.getElementById('resultBox');
  if (existResult) {
    existResult.querySelector('h1').textContent = result;
    return;
  }
  // 将结果插入页面
  gradeDom.insertAdjacentHTML('beforeend', `
    <div id="resultBox">
      <h1>${result}</h1>
    </div>
  `)
}

内容的提问来源于stack exchange，提问作者gracedshowoff