数据用量计算器按钮点击后输出变量无法在页面顶部显示求助

我花了好几小时制作一款基础数据用量计算器，期望实现点击按钮后计算对应数值并在页面顶部展示的功能。此前使用数值输入时功能正常，但切换为按钮交互后，页面顶部的total_data_usage元素始终无法显示计算结果。后续会基于总数据用量实现月度数据用量计算，目前已尝试多种调整但均无效，效果情况如下：

• 预期效果：页面顶部展示计算得出的总数据用量数值
• 当前效果：页面顶部的total_data_usage元素无任何内容展示

代码如下：

<h1>Data Usage Calculator</h1>
<p id="total_data_usage"></p>
<p id="total_monthly_data_usage"></p>
<style>
    .btn {
        background-color: white;
        border: 1px solid black;
        padding: 8px 16px;
        cursor: pointer;
    }

    .btn.selected {
        background-color: black;
        color: white;
    }

    #total_data_usage {
        font-size: 40px;
    }

    #total_monthly_data_usage {
        font-size: 40px;
    }

    body {
        padding: 20px;
        font-family: 'Lato', sans-serif;
        font-size: 13pt;
        text-align: center;
    }

    form {
        display: inline-block;
        width: 400px;
    }
</style>

<form>

    <h2>Select number of hours per day for streaming in SD:</h2>

    <button type="button" class="btn" id="never" name="sd_streaming_hours" value="0">Never</button>
    <button type="button" class="btn" id="one_hour" name="sd_streaming_hours" value="1">1 hour</button>
    <button type="button" class="btn" id="two_hours" name="sd_streaming_hours" value="2">2 hours</button>
    <button type="button" class="btn" id="three_hours" name="sd_streaming_hours" value="3">3 hours</button>
    <button type="button" class="btn" id="five_hours" name="sd_streaming_hours" value="5">5 hours</button>
    <button type="button" class="btn" id="eight_hours" name="sd_streaming_hours" value="8">8 hours</button>

</form>

<script>

    document.getElementById("never").addEventListener("click", updateResult);
    document.getElementById("one_hour").addEventListener("click", updateResult);
    document.getElementById("two_hours").addEventListener("click", updateResult);
    document.getElementById("three_hours").addEventListener("click", updateResult);
    document.getElementById("five_hours").addEventListener("click", updateResult);
    document.getElementById("eight_hours").addEventListener("click", updateResult);

</script>

<script>

    const buttons = document.querySelectorAll('button[name="sd_streaming_hours"]');

    buttons.forEach(button => {
        button.addEventListener('click', function () {
            // Deselect all buttons
            buttons.forEach(btn => btn.classList.remove('selected'));
            // Select this button
            this.classList.add('selected');
        });
    });


</script>

<script>

    console.log(totalDataUsage);
    var totalDataUsage;
    var totalMonthlyDataUsage;

    function updateResult(event) {
        // Get the value of the clicked button
        var buttonValue = event.target.value;

        // Calculate the result of the desired calculation
        totalDataUsage = buttonValue * 2;

        // Display the result on the page
        document.getElementById("total_data_usage").innerHTML = totalDataUsage + "GB";
    }

</script>

问题原因 #

1. 变量引用顺序错误：你在console.log(totalDataUsage);执行后才声明var totalDataUsage;，这会触发控制台报错，导致后续JS代码中断执行，updateResult函数无法正常工作。
2. 重复绑定点击事件：给每个按钮绑定了两次点击事件，虽然不直接导致功能失效，但会增加代码冗余和维护成本。

修复方案 #

1. 调整变量声明顺序，移除无意义的提前打印语句，避免代码报错中断。
2. 将按钮的选中状态切换逻辑整合到updateResult函数中，避免重复绑定事件。
3. 显式将按钮的value转为数字类型，避免隐式转换可能带来的问题。

修复后的完整代码：

<h1>Data Usage Calculator</h1>
<p id="total_data_usage"></p>
<p id="total_monthly_data_usage"></p>
<style>
    .btn {
        background-color: white;
        border: 1px solid black;
        padding: 8px 16px;
        cursor: pointer;
    }

    .btn.selected {
        background-color: black;
        color: white;
    }

    #total_data_usage {
        font-size: 40px;
    }

    #total_monthly_data_usage {
        font-size: 40px;
    }

    body {
        padding: 20px;
        font-family: 'Lato', sans-serif;
        font-size: 13pt;
        text-align: center;
    }

    form {
        display: inline-block;
        width: 400px;
    }
</style>

<form>
    <h2>Select number of hours per day for streaming in SD:</h2>
    <button type="button" class="btn" id="never" name="sd_streaming_hours" value="0">Never</button>
    <button type="button" class="btn" id="one_hour" name="sd_streaming_hours" value="1">1 hour</button>
    <button type="button" class="btn" id="two_hours" name="sd_streaming_hours" value="2">2 hours</button>
    <button type="button" class="btn" id="three_hours" name="sd_streaming_hours" value="3">3 hours</button>
    <button type="button" class="btn" id="five_hours" name="sd_streaming_hours" value="5">5 hours</button>
    <button type="button" class="btn" id="eight_hours" name="sd_streaming_hours" value="8">8 hours</button>
</form>

<script>
    const buttons = document.querySelectorAll('button[name="sd_streaming_hours"]');
    let totalDataUsage;
    let totalMonthlyDataUsage;

    function updateResult(event) {
        // 切换按钮选中状态
        buttons.forEach(btn => btn.classList.remove('selected'));
        event.target.classList.add('selected');
        
        // 获取按钮值并转为数字类型
        const buttonValue = Number(event.target.value);
        // 计算总数据用量
        totalDataUsage = buttonValue * 2;
        // 展示结果
        document.getElementById("total_data_usage").textContent = `${totalDataUsage}GB`;
    }

    // 给所有按钮绑定点击事件
    buttons.forEach(button => {
        button.addEventListener('click', updateResult);
    });
</script>

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