原生JS巴士乘客计数器按钮触发if-else提示功能问题

问题根因 #

现有代码的载客容量判断逻辑仅绑定在车型选择按钮的点击事件中，计数增减操作执行后没有触发容量校验流程，因此操作计数按钮时提示信息无法实时同步更新。原代码同时存在两个可优化点：三个车型的判断逻辑大量重复、message变量未做声明存在隐性报错风险。

修复方案 #

• 新增全局变量记录当前选中的车型，未选择车型时不触发容量提示
• 抽离独立的容量提示更新公共函数，统一处理不同车型的阈值判断、提示文案输出逻辑
• 所有会修改乘客计数的操作（+1/-1/+5/-5、切换车型、重置）执行完成后，统一调用公共校验函数更新提示
• 重置操作同步清空选中车型状态，和导航栏样式重置逻辑匹配

修复后完整代码 #

let messageEl = document.getElementById("message-el")
let countEl = document.getElementById("count-el")
let ddsNavEl = document.getElementById("dds-nav-el")
let ddsbNavEl = document.getElementById("ddsb-nav-el")
let mciNavEl = document.getElementById("mci-nav-el")
let increaseEl = document.getElementById("increase-btn")
let decreaseEl = document.getElementById("decrease-btn")
let increaseFiveEl = document.getElementById("increaseFive-btn")
let decreaseFiveEl = document.getElementById("decreaseFive-btn")
let count = 0
// 记录当前选中的车型
let selectedBusType = null

// 公共方法：根据当前计数和选中车型更新提示
function updateCapacityMessage() {
    // 未选车型时清空提示
    if (!selectedBusType) {
        messageEl.textContent = ""
        return
    }

    let fullSeatThreshold = 0
    let overCapacityThreshold = 0
    // 匹配对应车型的容量规则
    switch(selectedBusType) {
        case "dds":
            fullSeatThreshold = 15
            overCapacityThreshold = 16
            break
        case "ddsb":
            fullSeatThreshold = 12
            overCapacityThreshold = 13
            break
        case "mci":
            fullSeatThreshold = 10
            overCapacityThreshold = 11
            break
    }

    let message = ""
    if (count === fullSeatThreshold) {
        message = "已达到满座容量"
    } else if (count > overCapacityThreshold) {
        message = "已超载"
    }
    messageEl.textContent = message
}

// 计数功能：每次修改计数后调用提示更新
function increase() {
    count++
    countEl.textContent = count
    updateCapacityMessage()
}

function decrease() {
    // 避免计数出现负数
    if (count <= 0) return
    count--
    countEl.textContent = count
    updateCapacityMessage()
}

function increaseFive() {
    count += 5
    countEl.textContent = count
    updateCapacityMessage()
}

function decreaseFive() {
    // 避免计数出现负数
    count = Math.max(0, count -5)
    countEl.textContent = count
    updateCapacityMessage()
}

function reset() {
    messageEl.textContent = "";
    countEl.textContent = 0
    count = 0
    // 重置选中车型状态
    selectedBusType = null
    ddsNavEl.style.fontWeight = "normal";
    ddsbNavEl.style.fontWeight = "normal";
    mciNavEl.style.fontWeight = "normal";
} 

// 车型选择函数：更新选中状态+导航样式+调用提示更新
function ddsSelect() {
    selectedBusType = "dds"
    ddsNavEl.style.fontWeight = "bold";
    ddsbNavEl.style.fontWeight = "normal";
    mciNavEl.style.fontWeight = "normal";
    updateCapacityMessage()
}

function ddsbSelect() {
    selectedBusType = "ddsb"
    ddsbNavEl.style.fontWeight = "bold";
    ddsNavEl.style.fontWeight = "normal";
    mciNavEl.style.fontWeight = "normal";
    updateCapacityMessage()
}

function mciSelect() {
    selectedBusType = "mci"
    mciNavEl.style.fontWeight = "bold";
    ddsNavEl.style.fontWeight = "normal";
    ddsbNavEl.style.fontWeight = "normal";
    updateCapacityMessage()
}

额外优化：给减计数逻辑加了非负判断，避免出现乘客数为负数的不合理情况，不需要可以直接删掉对应判断。

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