数据用量计算器按钮异常：需多次点击、计算结果错误求助

页面地址：https://maxview.co.uk/data-usage-calculator-button-input/
密码：Liva

我开发的数据用量计算器出现以下异常行为：

• 需点击按钮3次才会显示GB单位的计算输出
• 输出结果与按钮设定的数值不符，且结果不稳定

我已尝试多种代码调整方案，包括将变量移至全局作用域。我怀疑问题与重复的document.querySelector调用有关，但移除或调整相关代码后仍未解决问题。

以下是对应的HTML和JavaScript代码（样式部分已省略，判定与问题无关）：

<h1>Data Usage Calculator</h1>
<p id="total_data_usage"></p>
<p id="total_monthly_data_usage"></p>

<form>

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

  <button type="button" class="btn" id="sdnever" name="sd_streaming_hours" value="0">Never</button>
  <button type="button" class="btn" id="sdone_hour" name="sd_streaming_hours" value="1">1 hour</button>
  <button type="button" class="btn" id="sdtwo_hours" name="sd_streaming_hours" value="2">2 hours</button>
  <button type="button" class="btn" id="sdthree_hours" name="sd_streaming_hours" value="3">3 hours</button>
  <button type="button" class="btn" id="sdfive_hours" name="sd_streaming_hours" value="5">5 hours</button>
  <button type="button" class="btn" id="sdeight_hours" name="sd_streaming_hours" value="8">8 hours</button>

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

  <button type="button" class="btn" id="hdnever" name="hd_streaming_hours" value="0">Never</button>
  <button type="button" class="btn" id="hdone_hour" name="hd_streaming_hours" value="1">1 hour</button>
  <button type="button" class="btn" id="hdtwo_hours" name="hd_streaming_hours" value="2">2 hours</button>
  <button type="button" class="btn" id="hdthree_hours" name="hd_streaming_hours" value="3">3 hours</button>
  <button type="button" class="btn" id="hdfive_hours" name="hd_streaming_hours" value="5">5 hours</button>
  <button type="button" class="btn" id="hdeight_hours" name="hd_streaming_hours" value="8">8 hours</button>

</form>

<script>

  // SD streaming button listeners

  document.getElementById("sdnever").addEventListener("click", updateResult);
  document.getElementById("sdone_hour").addEventListener("click", updateResult);
  document.getElementById("sdtwo_hours").addEventListener("click", updateResult);
  document.getElementById("sdthree_hours").addEventListener("click", updateResult);
  document.getElementById("sdfive_hours").addEventListener("click", updateResult);
  document.getElementById("sdeight_hours").addEventListener("click", updateResult);

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

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

  document.getElementById("hdnever").addEventListener("click", updateResult);
  document.getElementById("hdone_hour").addEventListener("click", updateResult);
  document.getElementById("hdtwo_hours").addEventListener("click", updateResult);
  document.getElementById("hdthree_hours").addEventListener("click", updateResult);
  document.getElementById("hdfive_hours").addEventListener("click", updateResult);
  document.getElementById("hdeight_hours").addEventListener("click", updateResult);

  const hdStreamButtons = document.querySelectorAll('button[name="hd_streaming_hours"]');

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

  var totalDataUsage;
  //var totalMonthlyDataUsage;
  //var sdStreamButtonValue;
  //var hdStreamButtonValue;

  function updateResult() {
  // Get selected sd streaming hours button
  const sdSelectedButton = document.querySelector('button[name="sd_streaming_hours"].selected');
  // Calculate sd data usage based on selected button value
  const sdDataUsage = parseInt(sdSelectedButton.value) * 0.1;

  // Get selected hd streaming hours button
  const hdSelectedButton = document.querySelector('button[name="hd_streaming_hours"].selected');
  // Calculate hd data usage based on selected button value
  const hdDataUsage = parseInt(hdSelectedButton.value) * 0.3;

  // Calculate total data usage
  const totalDataUsage = sdDataUsage + hdDataUsage;
  // Update total data usage element text
  document.getElementById("total_data_usage").textContent = totalDataUsage + "GB";

}

</script>

恳请各位开发者帮忙排查代码错误，万分感谢！

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