JavaScript元素更新不同步的执行顺序问题求助

我已开发该项目数周，添加允许用户输入或按步长1调整旅行天数的tripdays元素后，HTML元素更新出现延迟——输入天数后无法立即更新，需点击两次按钮才生效。我推测问题与事件监听器的代码位置有关，元素独立执行而非同步更新。

期望行为 #

点击任意按钮一次，或输入天数时，total_data_usage和total_trip_data_usage两个元素立即同步更新。

尝试操作与现有代码 #

我尝试调整tripdays元素的事件监听器位置，使其与按钮事件监听器同步执行，但未成功。以下是DOM对应的JavaScript代码：

let totals = {
    "sd_streaming_hours": 0,
    "hd_streaming_hours": 0,
    "video_streaming_hours": 0,
    "music_streaming_hours": 0,
    "nav_hours": 0,
    "gaming_hours": 0,
    "browsing_hours": 0,
    "emails_sent": 0
};

document.body.addEventListener("click", (e) => {
    const el = e.target;
    if (el.classList.contains("btn")) {
        const name = el.name;

        const selected = document.querySelector(".selected[name=" + name + "]");
        if (selected) {
            selected.classList.remove("selected")
        }
        el.classList.add("selected")
        let val = parseInt(el.value);
        switch (name) {
            case "sd_streaming_hours":
                val = val * 0.1;
                break;
            case "hd_streaming_hours":
                val = val * 0.3;
                break;
            case "video_streaming_hours":
                val = val * 0.4;
                break;
            case "music_streaming_hours":
                val = val * 0.4;
                break;
            case "nav_hours":
                val = val * 0.4;
                break;
            case "gaming_hours":
                val = val * 0.4;
                break;
            case "browsing_hours":
                val = val * 0.4;
                break;
            case "emails_sent":
                val = val * 0.4;
                break;
        }
    
        totals[name] = val
        updateDataUsage();
    }
});

function updateDataUsage(){
    let input = document.getElementById("tripdays");
    let totalDataUsage = document.getElementById("total_data_usage");
    let totalTripDataUsage = document.getElementById("total_trip_data_usage");
    if (input && totalDataUsage && totalTripDataUsage) {
        input = parseFloat(input.value);
        let tripDataUsage = parseFloat(totalDataUsage.textContent);
        let tripDaysInputValue = (input * tripDataUsage)
        totalTripDataUsage.textContent = tripDaysInputValue.toFixed(1) + "GB";
        totalDataUsage.textContent = (totals["sd_streaming_hours"] + totals["hd_streaming_hours"] + totals["video_streaming_hours"] + totals["music_streaming_hours"] + totals["nav_hours"] + totals["gaming_hours"] + totals["browsing_hours"] + totals["emails_sent"]).toFixed(1) + "GB";
    }};

document.getElementById("sdnever").click();

let tripDays = document.getElementById("tripdays")
if(tripDays){
    tripDays.value = "1";
    tripDays.addEventListener("change", updateDataUsage);
    tripDays.addEventListener("click", updateDataUsage);

document.getElementById("tripdays").focus();
document.getElementById("tripdays").dispatchEvent(new Event('click'));
}

问题根源 #

1. updateDataUsage函数计算顺序错误：先读取DOM里旧的单日数据值计算旅行总数据，之后才更新单日数据，导致旅行总数据用的是旧值，需要第二次触发才能纠正。
2. tripdays事件监听冗余，且初始化时手动触发click事件的逻辑混乱，导致更新不同步。

修复后的完整代码 #

let totals = {
    "sd_streaming_hours": 0,
    "hd_streaming_hours": 0,
    "video_streaming_hours": 0,
    "music_streaming_hours": 0,
    "nav_hours": 0,
    "gaming_hours": 0,
    "browsing_hours": 0,
    "emails_sent": 0
};

document.body.addEventListener("click", (e) => {
    const el = e.target;
    if (el.classList.contains("btn")) {
        const name = el.name;

        const selected = document.querySelector(`.selected[name="${name}"]`);
        if (selected) {
            selected.classList.remove("selected")
        }
        el.classList.add("selected")
        let val = parseInt(el.value);
        switch (name) {
            case "sd_streaming_hours":
                val = val * 0.1;
                break;
            case "hd_streaming_hours":
                val = val * 0.3;
                break;
            case "video_streaming_hours":
                val = val * 0.4;
                break;
            case "music_streaming_hours":
                val = val * 0.4;
                break;
            case "nav_hours":
                val = val * 0.4;
                break;
            case "gaming_hours":
                val = val * 0.4;
                break;
            case "browsing_hours":
                val = val * 0.4;
                break;
            case "emails_sent":
                val = val * 0.4;
                break;
        }
    
        totals[name] = val;
        updateDataUsage();
    }
});

function updateDataUsage() {
    const inputEl = document.getElementById("tripdays");
    const totalDataUsageEl = document.getElementById("total_data_usage");
    const totalTripDataUsageEl = document.getElementById("total_trip_data_usage");
    
    if (!inputEl || !totalDataUsageEl || !totalTripDataUsageEl) return;

    // 先计算最新的单日总数据用量
    const dailyTotal = Object.values(totals).reduce((sum, val) => sum + val, 0);
    const dailyTotalFixed = dailyTotal.toFixed(1);
    
    // 更新单日数据显示
    totalDataUsageEl.textContent = `${dailyTotalFixed}GB`;
    
    // 计算并更新旅行总数据用量（用最新的单日数据）
    const tripDays = parseFloat(inputEl.value) || 1; // 非数字输入默认按1天计算
    const tripTotal = (tripDays * dailyTotal).toFixed(1);
    totalTripDataUsageEl.textContent = `${tripTotal}GB`;
}

// 默认选中第一个"never"按钮
document.getElementById("sdnever").click();

// 初始化旅行天数输入框
const tripDaysInput = document.getElementById("tripdays");
if (tripDaysInput) {
    tripDaysInput.value = "1";
    // 监听输入和变化事件，覆盖手动输入、步长调整等所有场景
    tripDaysInput.addEventListener("input", updateDataUsage);
    tripDaysInput.addEventListener("change", updateDataUsage);
    
    tripDaysInput.focus();
    // 直接调用更新函数初始化显示
    updateDataUsage();
}

关键优化点 #

1. 调整计算顺序：先通过totals对象计算最新的单日总数据，再用这个值计算旅行总数据，确保所有计算基于最新状态，不再依赖DOM旧值。
2. 优化事件监听：用input事件覆盖实时输入/步长调整场景，change事件处理输入框失焦的情况，去掉冗余的click监听。
3. 简化初始化：直接调用updateDataUsage初始化显示，避免手动触发事件的混乱逻辑。
4. 容错处理：添加|| 1处理用户输入非数字的情况，防止计算出错。

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