数组值求和生成总分功能异常：点击按钮仅显示数组而非总分

问题情况 #

应用需在用户完成多项选择后计算并展示总分，其他功能正常，但点击「生成总分」按钮时，看不到计算后的总分，只会显示包含单个分值文本的完整数组。

代码问题分析 #

给出的代码存在三个关键问题：

• 数组声明顺序错误：totalScores数组在执行push操作之后才声明，会导致push时变量未定义，后续声明还会覆盖之前的引用，最终数组内容无法正确保留。
• 存储文本而非数值：scoreValue1和scoreValue2C是带描述文本的字符串（比如"The Score Is: 10"），不是纯分数值，即便数组正常，也无法直接计算总分。
• 重复声明变量：appendedValue被用const重复声明，严格模式下会直接报错，影响代码执行。

修复方案 #

调整代码逻辑，先声明数组、存储纯数值、计算总分后再展示：

// 提前声明存储分数值的数组
const totalScores = [];

// 提取纯分数值存入数组，而非带文本的字符串
totalScores.push(theScores.scores0);
totalScores.push(theScores.scores2);

// 页面展示单个分值（保留原有展示逻辑）
$("#score-1").append(`The Score Is: ${theScores.scores0}`);
$("#score-2").append(`The Score Is: ${theScores.scores2}`);

// 计算总分：用reduce累加数组中的数值
const totalScore = totalScores.reduce((sum, current) => sum + current, 0);

// 将总分展示到页面（假设页面有id为total-score的元素用于显示总分）
$("#total-score").append(`Total Score: ${totalScore}`);

对应截图说明 #

• 总分结果：原本显示的是包含"The Score Is: X"格式字符串的数组，修复后会展示计算后的具体总分数值
• 追加的分值：页面上单个选项的分值文本可正常展示，这部分逻辑无需改动

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