所以我有我的 JS 函式來檢查是否選擇了單選按鈕，然后像往常一樣在我的 HTML 上顯示該值。
我的問題是它只有在默認值設定為 0 時才有效。我將如何更改它，以便如果我checked在我的 HTML 單選輸入中使用 $5 上的選項，它也會在我的瀏覽器中顯示該值？
如果我將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選中的選項，但是，瀏覽器上的 HTMLTips將顯示，Tip: $0.00而不是Tip: $5.00除非我單擊它
uj5u.com熱心網友回復：
它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);
});
uj5u.com熱心網友回復：
首先，您有一個名為“tip”的全域變數和一個帶有“tip”的元素id。帶有 s 的元素id也變成了全域，所以你在命名上有沖突。
接下來，您需要td在您的 JS 中以及當小費金額發生變化時對其進行初始更新。
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>uj5u.com熱心網友回復：
只需觸發一個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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/490779.html
標籤：javascript html 输入 收音机
上一篇：將相似的鍵值對分組為單個陣列