我已经尝试了几个小时，现在创建一个基本的数据使用计算器，当你选择其中一个按钮，它计算的值分配和显示在页面的顶部。
你可以在
我打算显示它的一部分。我会得到周围的每月数据使用情况，因为这将饲料从总的数据使用。
有谁能指出我这里有什么问题吗？我设法让它工作正常的值只是数字输入，但现在我已经开始使用按钮，我还没有设法让它工作。
这是我希望它看起来的样子，数据使用情况在顶部：
Variables displayed
而这就是我正在得到的按钮版本（或没有得到）：
Variables not displaying
缺少数据使用部分

<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>

我尝试了很多改进，但似乎都不起作用。所有内容似乎都链接回total_data_usage输出，但由于某种原因什么也没有显示。