在HTML上进行默认检查的单选按钮值显示？

Question

因此，我的JS函数可以检查是否选择了单选按钮，然后像正常情况一样在我的HTML上显示值。

我的问题是它仅在设置为0时才有效。我将如何更改此操作，以便如果我在我的HTML无线电输入中使用$ 5的检查选项，它也会在我的浏览器中显示该值吗？

如果我将检查选项更改为其他提示值，它仍然显示为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>  

，因此，默认情况下，我的应用将显示提示：$ 5 选项已选中，但是，浏览器上的HTML for 提示会说提示：$ 0.00 而不是提示：$ 5.00 ，除非我单击它

Answer 1

它仅在单击单击单击单击时，才设置 window.tip ，因为您添加了仅在单击时触发的事件侦听器。您可以添加一个on Load Event侦听器。

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);
});

我还在第一个事件听众中删除了不必要的其他陈述。

编辑

自动更新 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);
});

Answer 2

首先，您还拥有一个名为“提示”的全局变量，还有一个带有 ID 的元素。具有 id s的元素也成为全局，因此您在命名方面有冲突。

接下来，您需要在JS中以及提示量更改时最初更新该 TD 。

let tip = 0;

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

// Initialize the table data
tipTotal.textContent = document.querySelector(".tips:checked").value;

document.addEventListener("click", function(event) {
  // No need to see if it's checked because clicking
  // on a radio button makes it checked and this code
  // wouldn't be called if you didn't click it.
  if (event.target.className === "tips") {
    tipTotal.textContent = event.target.value  // Update the table
  }
});

<div>
  <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>
  <label for="tip2">$5</label>
</div>

<table>
  <tr><td id="tipAmount"></td></tr>
</table>

Answer 3

只需触发 tip2 单击“单击事件”事件：

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

例如：

const tipTotal = document.getElementById("tip");
const tipButton = document.getElementById("tip2");

tipButton.addEventListener("click", ({ target }) => {
  if (target.className === "tips" && target.checked) {
    window.tip.innerText = "$" + target.value;
  } else {
    return;
  }
});

// activate click event on tip2 radio button
tipButton.click();

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

<div>
  <input type="radio" value="5.00" id="tip2" name="tip" class="tips" />
  <label for="tip2">$5</label>
</div>