JavaScript取两分数较大值执行逻辑及变量作用域、函数优化问题

错误原因 #

• 变量作用域问题：scoreOne、scoreTwo是scoreEntry函数内声明的局部变量，外部的scoreCheck函数无法访问，运行时会抛出变量未定义的报错。
• 逻辑遗漏：原有判断仅在scoreOne > scoreTwo时执行检查，没有覆盖scoreTwo更大、两个分数相等的场景，无法正确取到两个分数的最大值。

方案1：保留双函数结构（修正版） #

通过传参的方式将计算得到的最大值传入scoreCheck，避免作用域问题：

let buttonScore = document.querySelector('.button-score');
let paraScore = document.querySelector('.para-score');

buttonScore.addEventListener('click', scoreEntry);

function scoreEntry() {
    let scoreOne = Number(prompt('Enter first score'));
    let scoreTwo = Number(prompt('Enter second score'));
    // 直接取两个分数的最大值
    const maxScore = Math.max(scoreOne, scoreTwo);
    scoreCheck(maxScore);
}

function scoreCheck(targetScore) {
    if (targetScore > 9) {
        paraScore.textContent = 'Excellent!';
    } else if (targetScore < 7) {
        paraScore.textContent = 'Not enough';
    } else {
        paraScore.textContent = 'Good';
    }
}

方案2：合并为单个函数实现 #

完全可以把逻辑合并到同一个事件回调函数里，结构更简洁：

let buttonScore = document.querySelector('.button-score');
let paraScore = document.querySelector('.para-score');

buttonScore.addEventListener('click', function() {
    const scoreOne = Number(prompt('Enter first score'));
    const scoreTwo = Number(prompt('Enter second score'));
    const maxScore = Math.max(scoreOne, scoreTwo);

    if (maxScore > 9) {
        paraScore.textContent = 'Excellent!';
    } else if (maxScore < 7) {
        paraScore.textContent = 'Not enough';
    } else {
        paraScore.textContent = 'Good';
    }
});

可选优化 #

可以新增输入合法性校验，避免用户输入非数字内容导致逻辑异常：

// 在获取输入后增加判断
if (isNaN(scoreOne) || isNaN(scoreTwo)) {
    paraScore.textContent = '请输入有效的数字分数';
    return;
}

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