Can't calculate total in js with radio type check

user_15459945 0
Viewed 36

I can't find the problem in this code, i have a table td with input radio type and i want to calculate the total of Type,Strings,Size that the user checks. The user has 3 or 4 options and the price is different for each option. The result i get is always zero. Can anyone help me?

document.getElementById('calculate').addEventListener('click', function (ev) {
  
  var total=0;

  /* var radiotype = document.getElementsByName('type');
  var radiostrings = document.getElementsByName('strings');
  var radiosize = document.getElementsByName('size'); */

  for (var i = 0; i < 3; i++) {
    if (document.getElementById('acoustic').checked) {
      total+= 600;
      break;
    }
    else if (document.getElementById('electric').checked) {
      total += 900;
      break;
    }
    else if (document.getElementById('classical').checked) {
      total += 500;
      break;
    }

    if (document.getElementById('elixir').checked) {
      total+= 30;
      break;
    }
    else if (document.getElementById('daddario').checked) {
      total += 10;
      break;
    }
    else if (document.getElementById('martin').checked) {
      total += 20;
      break;
    }
  }

  for (var i = 0; i < 4; i++) {
    if (document.getElementById('1/4').checked) {
      total+= 20;
      break;
    }
    else if (document.getElementById('2/4').checked) {
      total += 30;
      break;
    }
    else if (document.getElementById('3/4').checked) {
      total += 40;
      break;
    }
    else if (document.getElementById('4/4').checked) {
      total += 50;
      break;
    }
  }

  var divobj = document.getElementById('result')
  divobj.value = total;
});

html for type (it's similar for the other ones) :

  <table class="type">
                <thead>
                    <tr>
                        <td colspan="2">Choose Type</td>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="acoustic"><input type="radio" name="type" value="acoustic" checked>Acoustic</td>
                    <td class="price">$600.00</td>
                </tr>
                <tr>
                    <td id="electric"><input type="radio" name="type" value="electric">Electric</td>
                    <td class="price">$900.00</td>
                </tr>
                <tr>
                    <td id="classical"><input type="radio" name="type" value="classical">Classical</td>
                    <td class="price">$500.00</td>
                </tr>
            </tbody>
html javascript
2 Answers

The problem (as I see) that you broke the loop if any value is checked.

To make it clear to you, let's assume that the user selected acoustic; in the first loop iteration the if statement will be true, 600 will be added to the total and the loop will be broken.

What about the other options? nothing is handled.

You can fix it by getting the radio groups (by name) instead of a fixed number of iterations, like:

document.getElementById('calculate').addEventListener('click', function (ev) {
  var total= 0;

  var radiotype = document.getElementsByName('type');
  var radiostrings = document.getElementsByName('strings');
  var radiosize = document.getElementsByName('size');

  for(let node of radiotype) {
    if (!node.checked) continue;
    // radio is checked
    switch(node.value) {
      case 'acoustic':
        total+= 600;
        break;
      case 'electric':
        total+= 900;
        break;
      case 'classical':
        total+= 500;
        break;
    }
    // break the loop
    break;
  }
  // TODO: the same of the rest groups
});

This should work properly.

user_61578480

Currently you have assigned your 'td' 'id' on which you are checking your values. You have to add those ids on inputs as those are actually the radio inputs. Other way around is to have td and within td check for radio button.

For example:

  <td><input id="acoustic" type="radio" name="type" value="acoustic" checked>Acoustic</td>
                        <td class="price">$600.00</td>

after that

document.getElementById('acoustic').checked
user_56227110
Related