CODEWITHSUNDEEP
javascripthtml
J. Bay
J. Bay

Reputation: 19

Calculate the combined value of 2 radio button groups

I am very new to coding and have ran into a possibly simple problem but it has me stuck.

I have two individual radio button groups (3 buttons each). I have assigned names and values to each button and have created a JS that shows an alert box with the assigned value of the first group. Here is where I am stuck.

The second group holds a mark up by percentage and needs to be added to the value of the button selected in the first group. What do I need to change?

<!doctype html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Help</title>
  <script>
    // Calculate and display the total cost of the selected
    function calculateCost() {
    var radiobutton; // A radio button
    var cost = 0; // Cost of the selected room
    // Add up the cost of the selected rooms
    for (var i = 1; i <= 3; i++) {
      radiobutton = document.getElementById("type" + i);
      if (radiobutton.checked == true) {
        cost += parseInt(radiobutton.value);
      }
    }
    alert("The cost is $" + cost);
   }
  </script>
</head>
<body>
  <form>
    <h1>Market</h1>
    <p>Complete the form below to calculate the cost.</p>
    <p>Type:</p>
    <p><input type="radio" id="type1" name="type"
      value="135"> <label for="type1">A</label><br>
      <input type="radio" id="type2" name="type"
      value="175"> <label for="type2">B</label><br>
      <input type="radio" id="type3" name="type"
      value="215"> <label for="type3">C</label><br>
      <p>Mark up:</p>
      <p><input type="radio" id="mark1" name="mark"
        value="0"> <label for="mark1">No Markup</label><br>
        <input type="radio" id="mark2" name="mark"
        value="15" ><label for="mark2">13% markup</label><br>
        <input type="radio" id="mark3" name="mark"
        value="15"> <label for="mark3">15% markup)</label><br>
        <p><input type="submit" value="Submit"
          onClick="calculateCost();">
          <input type="reset"></p>
    </form>
  </body>
</html>

Upvotes: 1

Views: 1202

Answers (3)

Abhitalks
Abhitalks

Reputation: 28437

You can simplify your function to make it easier to understand:

function calculateCost() {
    var cost = 0, markup = 0; 
    cost = +(document.querySelectorAll("[name=type]:checked")[0].value);
    markup = +(document.querySelectorAll("[name=mark]:checked")[0].value);
    cost += cost * (markup/100);
    alert("The cost is $" + cost);
}

querySelectorAll to query all elements where name is type (or mark) and are checked. It returns a nodeList, so get the element at 0th index. Use +(..) to get the numeric value from the string.

Upvotes: 0

duncanhall
duncanhall

Reputation: 11431

You need to get the original type value and then multiple this by the markup. For percentage values, this needs to be in a format like this:

15% = 1.15 * the original
13% = 1.13 * the original
...etc...

So your calculate cost function might look like this:

function calculateCost() {
    var selectedType = document.querySelector('input[name="type"]:checked').value;
    var selectedMarkup = document.querySelector('input[name="mark"]:checked').value;
    var total = selectedType * selectedMarkup;
    alert('The cost is ' + total);
}

You can view this jsfiddle to see it working: https://jsfiddle.net/L68ndwLc/

Note that the values of the markups have been changed to the format mentioned above.

Upvotes: 0

Sarjan Desai
Sarjan Desai

Reputation: 3733

Added some code without refactoring for adding percentage calculation.

<!doctype html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Help</title>
  <script>
    // Calculate and display the total cost of the selected
    function calculateCost() {
    var radiobutton; // A radio button
    var markbutton;
    var cost = 0; // Cost of the selected room
    // Add up the cost of the selected rooms
    for (var i = 1; i <= 3; i++) {
      radiobutton = document.getElementById("type" + i);
      if (radiobutton.checked) {
        cost += parseInt(radiobutton.value);
      }
      markbutton = document.getElementById("mark" + i); // Get markup radio button
      if (markbutton.checked) {
        cost += (parseInt(radiobutton.value) * parseFloat(markbutton.value)) / 100;  // Add percentage markup
      }
    }
    alert("The cost is $" + cost);
   }
  </script>
</head>
<body>
  <form>
    <h1>Market</h1>
    <p>Complete the form below to calculate the cost.</p>
    <p>Type:</p>
    <p><input type="radio" id="type1" name="type"
      value="135"> <label for="type1">A</label><br>
      <input type="radio" id="type2" name="type"
      value="175"> <label for="type2">B</label><br>
      <input type="radio" id="type3" name="type"
      value="215"> <label for="type3">C</label><br>
      <p>Mark up:</p>
      <p><input type="radio" id="mark1" name="mark"
        value="0"> <label for="mark1">No Markup</label><br>
        <input type="radio" id="mark2" name="mark"
        value="15" ><label for="mark2">13% markup</label><br>
        <input type="radio" id="mark3" name="mark"
        value="15"> <label for="mark3">15% markup)</label><br>
        <p><input type="submit" value="Submit"
          onClick="calculateCost();">
          <input type="reset"></p>
    </form>
  </body>
</html>

Upvotes: 2

Related Questions