javascript - 在 HTML 上显示默认选中的单选按钮值？

Question

所以我有我的 JS 函数来检查单选按钮是否被选中，然后像往常一样在我的 HTML 上显示该值。

我的问题是它只有在默认值设置为 0 时才有效。 如果我在我的 HTML 中对 $5 使用 checked 选项，我该如何更改它 radio 输入，它还会在我的浏览器中显示该值吗？

如果我将 checked 选项更改为不同的 tip 值，它仍然显示 0 作为起始值，因为我没有点击任何东西。

这是我的 JS 代码

window.tip = 0;

const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

document.addEventListener("click", ({
      target
    }) => {
      if (target.className === "tips" && target.checked) {
        window.tip = parseInt(target.value);
      } else {
        return;

        tipTotal.textContent = `$${window.tip}`;
      }

我在这里显示选中的单选按钮

<td id="tip">$0.00</td>

这是我的 HTML 单选按钮

<input type="radio" value="0" id="tip0" name="tip" class="tips" />
<label for="tip0">$0</label>
</div>
<div>
  <input type="radio" value="300" id="tip1" name="tip" class="tips" />
  <label for="tip1">$3</label>
</div>
<div>
  <input type="radio" value="500" id="tip2" name="tip" class="tips" checked //here is the default checked option for $5 />
  <label for="tip2">$5</label>
</div>  

所以默认情况下，我的应用程序会显示选中的tip: $5 选项，但是，浏览器上的Tips HTML 会显示Tip: $0.00 而不是 Tip: $5.00 除非我点击它

Answer 1

它仅在单击单选按钮时设置 window.tip，因为您添加了一个仅在单击时触发的事件监听器。您可以添加一个加载事件监听器。

window.tip = 0;

const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

document.addEventListener("click", ({ target }) => {
    if (target.className === "tips" && target.checked) {
      window.tip = parseInt(target.value);
    }
});

document.addEventListener("load", () => {
    const selectedOption = document.querySelector(".tips:checked");
    window.tip = parseInt(selectedOption.value);
});

我还删除了第一个事件监听器中不必要的 else 语句。

编辑

自动更新tipTotal文本:

window.tip = 0;

const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

function updateTip(value) {
    window.tip = parseInt(value);
    tipTotal.textContent = window.tip;
}

document.addEventListener("click", ({ target }) => {
    if (target.className === "tips" && target.checked) {
      updateTip(target.value);
    }
});

document.addEventListener("load", () => {
    const selectedOption = document.querySelector(".tips:checked");
    updateTip(selectedOption.value);
});