使用innerHTML输出学生成绩仅显示最后一项的问题求助

问题根源 #

你当前代码里每次循环都用result.innerHTML = ...，这是覆盖式赋值——每一轮循环都会把之前的内容完全替换掉，所以最后只会显示数组里的最后一条学生信息。

修正方案 #

把赋值操作改成累加模式，用result.innerHTML += ...，这样每次循环都会把新的成绩信息追加到已有内容的后面。另外还有两个细节要注意：

• 循环开始前先清空目标元素的内容，避免页面原有内容干扰结果
• 给grade变量加上声明，避免它变成全局变量

修正后的完整代码 #

// 创建包含5个学生信息的二维数组
let studentsGrade = [
    ['David', 80],
    ['Victor', 77],
    ['Tracey', 55],
    ['Jason', 95],
    ['Raymond', 69]
];

// 根据分数获取字母等级的函数
function getGrade(value) {
    if (value >= 90) {
        return "A";
    } else if (value >= 80) {
        return "B";
    } else if (value >= 70) {
        return "C";
    } else if (value >= 60) {
        return "D";
    } else {
        return "F";
    }
}

// 先获取页面上的目标元素，确保存在id为result的元素
const result = document.getElementById('result');
// 清空原有内容
result.innerHTML = '';

// 循环遍历所有学生信息并追加到页面
for (let i = 0; i < studentsGrade.length; i++) {
    const name = studentsGrade[i][0];
    const value = studentsGrade[i][1];
    const grade = getGrade(value);
    
    // 用模板字符串拼接内容，更清晰
    result.innerHTML += `${name}'s number grade is ${value} and letter grade is a ${grade}<br>`;
}

新手友好提示 #

• 必须确保你的HTML页面里有一个带id="result"的元素，比如：<div id="result"></div>，不然代码会找不到目标元素报错
• 推荐用模板字符串（反引号包裹）拼接文本，比用加号拼接更直观，不容易出错
• 变量声明优先用const（值不会改变时）或let，尽量别用var，能减少不必要的全局变量问题

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