javascript - 无法通过单选类型检查计算 js 中的总数

Question

我在这段代码中找不到问题，我有一个带有输入单选类型的表td，我想计算用户检查的类型、字符串、大小的总数。用户有 3 或 4 个选项，每个选项的价格都不同。我得到的结果始终为零。谁能帮我吗？

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 类型(其他类型类似):

  <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>

Answer 1

问题(据我所知)是，如果检查任何值，您就会破坏循环。

为了让您清楚地了解，我们假设用户选择了声学；在第一次循环迭代中，if 语句将为 true，600 将被添加到 total 中，循环将被中断。

其他选项呢？没有任何处理。

您可以通过获取单选组(按名称)而不是固定的迭代次数来修复此问题，例如:

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

这应该可以正常工作。