Make Default Checked Radio Button Value Display on HTML?

Question

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

hmm well I could, but if I change the checked button to another option, then I'd have to manually change it again to the other value I picked, but also I have it auto calculate based on the value of the tip for my order total, so technically it wouldn't work because the order total wouldn't know to add $5 if I hard code it — joesono1
– joesono1, Commented Jun 14, 2022 at 18:02

User456 · Accepted Answer · 2022-06-14 18:24:02Z

1

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

edited Jun 14, 2022 at 18:24

answered Jun 14, 2022 at 17:58

User456

1,3117 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

joesono1 Over a year ago

that doesn't change the HTML on the browser though

User456 Over a year ago

@joesono1 Well, your code also didn't change that. You can change it by setting tipTotal textContent

joesono1 Over a year ago

I added my code that updates the HTML, but when I tried to add your code into mine it didn't show in the browser the checked value by default

User456 Over a year ago

@joesono1 I edited the answer. You can see the updated version

joesono1 Over a year ago

I tried it again and the html for id=tip is still showing $0.00

|

Scott Marcus · Accepted Answer · 2022-06-14 18:06:01Z

0

First, you've got a Global variable called "tip" and an element with an id of "tip" as well. Elements with ids 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>

edited Jun 14, 2022 at 18:06

answered Jun 14, 2022 at 18:01

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

5 Comments

joesono1 Over a year ago

but how does this display the value of the checked radio button without clicking it?

Scott Marcus Over a year ago

@joesono1 See my updated answer.

doug65536 Over a year ago

Why not event.target.classList.contains("tips")

joesono1 Over a year ago

so the updated line gets the value, but I need to divide the value by 100 and add .toFixed(2) to it. How would I do that? because I tried (value / 100).toFixed(2) but that isn't working

Scott Marcus Over a year ago

@doug65536 It could be that, but the OP only has one class, so className works fine.

bloodyKnuckles · Accepted Answer · 2022-06-14 18:12:15Z

0

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>

edited Jun 14, 2022 at 18:12

answered Jun 14, 2022 at 18:06

bloodyKnuckles

12.2k4 gold badges32 silver badges39 bronze badges

Collectives™ on Stack Overflow

Make Default Checked Radio Button Value Display on HTML?

3 Answers 3

6 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related