So I have my JS Function that checks if a radio button is selected, then displays the value on my HTML like normal.
My problem is it only works if the default value is set to 0. How would I change this so that if I use the checked
option on $5 in my HTML radio input, that it will also display that value in my browser?
If I change my checked
option to a different tip
value, it still shows 0 as the starting value since I didn't click anything.
Here is my JS Code
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}`;
}
I display the selected radio button here
<td id="tip">$0.00</td>
Here is my HTML Radio Buttons
<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>
So by default, my app will show the tip: $5
option checked, however, the HTML on the browser for Tips
will says Tip: $0.00
instead of Tip: $5.00
unless I click it
It sets window.tip
only when a radio button is clicked because you added an event listener that fires only on click. You can add an on load event listener.
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);
});
I also removed an unnecessary else statement in the first event listener.
EDIT
Automatically update tipTotal
text:
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);
});
First, you've got a Global variable called "tip" and an element with an id
of "tip" as well. Elements with id
s also become Global and so you've got a conflict in naming.
Next, you need to initially update that td
in your JS and also when the tip amount changes.
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>
Simply trigger a tip2
radio button click event:
document.getElementById("tip2").click();
For example:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.