CODEWITHSUNDEEP
javascripthtml
user12525781
user12525781

Reputation:

Calculations with Radio Buttons

I am trying to create this JavaScript calculation with radio buttons. So If the user Checks the "delivered to home address" then the value of £5.99 will be added into the total box, but if the user selects the other radio button, then no price will get shown. I am pretty new to JavaScript so I may have a few errors, but i'd be grateful if you could help me out 

<section id="collection">
                <h2>Collection method</h2>
                <p>Please select whether you want your chosen event ticket(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.</p>
                <p>
                Home address - &pound;5.99 <input type="radio" name="deliveryType" value="home" data-price="5.99" checked>&nbsp; | &nbsp;
                Collect from ticket office - no charge <input type="radio" name="deliveryType" value="ticketOffice" data-price="0">
                </p>
            </section>
Total <input type="text" name="total" size="10" readonly>

JavaScript

let totalPrice = 0;
var RadioBtn = document.getElementById ('input[name=deliveryType]');

radioBtn.addEventListener("click", function() {
  if(radioBtn.clicked) {
   totalPrice += parseFloat(radioBtn.dataset.price)
  total.value = " + totalPrice;
}
}

Upvotes: 0

Views: 66

Answers (1)

Alejandro
Alejandro

Reputation: 413

Here are my observations from the code provided:

  1. The radioBtn variable was declared with Pascal Case (first letter upper case) so it won't be referenced in the code since the other lines use camelCase(starts with Lower case). change to camelCase and stick with it through out the code.
  2. Your selector - getElementById is used for Ids and it would return one element, since you are passing a query selector 'input[name=deliveryType]' instead the code will not find the element you are looking for
  3. Since you are looking to add click events to the radio buttons, you can use getElementsByName and provide the name of the radio buttons. Then iterate through the resulting elements to apply the click event... that way the click will be called for both radio buttons.
  4. No need to check if clicked inside the click event, you already know it will be called when clicked only, instead you can add the event parameter to get the click target and its information to apply it as needed.

Example:

    let totalPrice = 0;
    let radioBtns = document.getElementsByName('deliveryType');
    let totalEl = document.getElementsByName ('total')[0];


    radioBtns.forEach(function(element, index){
      element.addEventListener("click", function(event){
       totalPrice += parseFloat(event.target.dataset.price); //remove += if the price should be the same everytime, replace with = or it will add the number to the total when clicked
       totalEl.value = totalPrice  +  " totalPrice";
     });
  });

https://jsfiddle.net/dn4x7oy9/8/

Upvotes: 1

Related Questions