Пытаюсь рассчитать мою общую цену в режиме реального времени, но вместо этого отображаются итоги для каждой компании сразу

Question

Я изучаю JavaScript и борюсь со следующей проблемой. Я создал форму и хотел бы, чтобы общая сумма обновлялась и отображалась в соответствии с переключателями, которые нажимает пользователь. Пример: если пользователь щелкает по распределению NB и доставке Джоуи, общая сумма должна отобразить 98,00 долларов США. Если пользователь нажимает все 3 кнопки, общее количество должно быть 488 и et c. et c.

Однако, когда я нажимаю на компанию, независимо от того, какая это из трех компаний, я получаю итоговые суммы для каждой отображаемой компании сразу. Это выглядит так: 03904949

Я впервые работаю с обновлениями в реальном времени в JavaScript, поэтому любая помощь и объяснение того, что я делаю неправильно, более чем приветствуются.

function updateTotal () {
  total = 0;
  total += frm.acme_bill.value  + frm.nb_bill.value + frm.joey_bill.value;
  document.getElementById("total").innerHTML = total;
}

<div class="row">
        <div class="col-25">
            <h1>ABC Corp</h1>
            <h4>Bill for the month of: June</h4>
            <h4>Payment due: 5/10/2020</h4>
            <hr />
            <form  action="" id="frm">
                <table id="billing">
                    <tr>
                        <th width="25%">Company</th>
                        <th width="25%">Pizzas</th>
                        <th width="25%">Orders</th>
                        <th width="25%">Price/pizza</th>
                        <th>Total</th>
                    </tr>
                    <tr>
                        <td>ACME</td>
                        <td>Cheese</td>
                        <td>10,000</td>
                        <td>$0.039</td>
                        <td>
                            <div class="radio1" id="radio1">
                                <input type="radio" value="390" name="acme_bill"onclick="updateTotal()">
                                <label for="regular">390.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>NB Distribution</td>
                        <td>Sausage</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio2">
                                <input type="radio" value="49" name="nb_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Joey's Trucking</td>
                        <td>Pepporini</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio3">
                                <input type="radio" value="49" name="joey_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
            <hr>
            <div id="total"></div>
            <hr>
        </div>
</div>

Answer 1

Вы должны добавить значение к общей сумме, только если оно отмечено.

Я изменил его с переключателя на флажок ниже, потому что вы не можете снять флажок с переключателя (если вы не выбрали другая кнопка в той же группе, но у вас нет групп).

function updateTotal() {
  total = 0;
  frm.querySelectorAll("input[type=checkbox]").forEach(input => {
    if (input.checked) {
      total += parseFloat(input.value);
    }
  });
  document.getElementById("total").innerHTML = total;
}

<div class="row">
  <div class="col-25">
    <h1>ABC Corp</h1>
    <h4>Bill for the month of: June</h4>
    <h4>Payment due: 5/10/2020</h4>
    <hr />
    <form action="" id="frm">
      <table id="billing">
        <tr>
          <th width="25%">Company</th>
          <th width="25%">Pizzas</th>
          <th width="25%">Orders</th>
          <th width="25%">Price/pizza</th>
          <th>Total</th>
        </tr>
        <tr>
          <td>ACME</td>
          <td>Cheese</td>
          <td>10,000</td>
          <td>$0.039</td>
          <td>
            <div class="radio1" id="radio1">
              <input type="checkbox" value="390" name="acme_bill" onclick="updateTotal()">
              <label for="regular">390.00</label>
            </div>
          </td>
        </tr>
        <tr>
          <td>NB Distribution</td>
          <td>Sausage</td>
          <td>1,000</td>
          <td>$0.049</td>
          <td>
            <div class="radio1" id="radio2">
              <input type="checkbox" value="49" name="nb_bill" onclick="updateTotal()">
              <label for="regular">49.00</label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Joey's Trucking</td>
          <td>Pepporini</td>
          <td>1,000</td>
          <td>$0.049</td>
          <td>
            <div class="radio1" id="radio3">
              <input type="checkbox" value="49" name="joey_bill" onclick="updateTotal()">
              <label for="regular">49.00</label>
            </div>
          </td>
        </tr>
      </table>
    </form>
    <hr>
    <div id="total"></div>
    <hr>
  </div>
</div>

Answer 2

Вы должны проверить переключатели, если они отмечены или нет, также вы должны проанализировать входные значения как float :

function updateTotal () {
  let total = 0;  document.querySelectorAll('input[type="radio"]:checked').forEach((el) => {
    total += parseFloat(el.value);
    document.getElementById("total").innerHTML = total;
  });
}

<div class="row">
        <div class="col-25">
            <h1>ABC Corp</h1>
            <h4>Bill for the month of: June</h4>
            <h4>Payment due: 5/10/2020</h4>
            <hr />
            <form  action="" id="frm">
                <table id="billing">
                    <tr>
                        <th width="25%">Company</th>
                        <th width="25%">Pizzas</th>
                        <th width="25%">Orders</th>
                        <th width="25%">Price/pizza</th>
                        <th>Total</th>
                    </tr>
                    <tr>
                        <td>ACME</td>
                        <td>Cheese</td>
                        <td>10,000</td>
                        <td>$0.039</td>
                        <td>
                            <div class="radio1" id="radio1">
                                <input type="radio" value="390" name="acme_bill"onclick="updateTotal()">
                                <label for="regular">390.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>NB Distribution</td>
                        <td>Sausage</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio2">
                                <input type="radio" value="49" name="nb_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Joey's Trucking</td>
                        <td>Pepporini</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio3">
                                <input type="radio" value="49" name="joey_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
            <hr>
            <div id="total"></div>
            <hr>
        </div>
</div>

Лучшей реализацией было бы наличие флажка вместо переключателя:

function updateTotal () {
  let total = 0;  document.querySelectorAll('input[type="checkbox"]:checked').forEach((el) => {
    total += parseFloat(el.value);
    document.getElementById("total").innerHTML = total;
  });
}

<div class="row">
        <div class="col-25">
            <h1>ABC Corp</h1>
            <h4>Bill for the month of: June</h4>
            <h4>Payment due: 5/10/2020</h4>
            <hr />
            <form  action="" id="frm">
                <table id="billing">
                    <tr>
                        <th width="25%">Company</th>
                        <th width="25%">Pizzas</th>
                        <th width="25%">Orders</th>
                        <th width="25%">Price/pizza</th>
                        <th>Total</th>
                    </tr>
                    <tr>
                        <td>ACME</td>
                        <td>Cheese</td>
                        <td>10,000</td>
                        <td>$0.039</td>
                        <td>
                            <div class="radio1" id="radio1">
                                <input type="checkbox" value="390" name="acme_bill"onclick="updateTotal()">
                                <label for="regular">390.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>NB Distribution</td>
                        <td>Sausage</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio2">
                                <input type="checkbox" value="49" name="nb_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Joey's Trucking</td>
                        <td>Pepporini</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio3">
                                <input type="checkbox" value="49" name="joey_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
            <hr>
            <div id="total"></div>
            <hr>
        </div>
</div>

Answer 3

Переделал все радио в чекбоксы. I l oop установите флажки и введите приведение к числу, используя + перед значением при суммировании суммы.

function updateTotal () {
  var _checkboxes = document.querySelectorAll("input[type='checkbox']:checked");
  total = 0;
  _checkboxes.forEach(function(el){
         total += +el.value;
  });

  
  
  document.getElementById("total").innerHTML = total;
}

<div class="row">
        <div class="col-25">
            <h1>ABC Corp</h1>
            <h4>Bill for the month of: June</h4>
            <h4>Payment due: 5/10/2020</h4>
            <hr />
            <form  action="" id="frm">
                <table id="billing">
                    <tr>
                        <th width="25%">Company</th>
                        <th width="25%">Pizzas</th>
                        <th width="25%">Orders</th>
                        <th width="25%">Price/pizza</th>
                        <th>Total</th>
                    </tr>
                    <tr>
                        <td>ACME</td>
                        <td>Cheese</td>
                        <td>10,000</td>
                        <td>$0.039</td>
                        <td>
                            <div class="radio1" id="radio1">
                                <input type="checkbox" value="390" name="acme_bill"onclick="updateTotal()">
                                <label for="regular">390.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>NB Distribution</td>
                        <td>Sausage</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio2">
                                <input type="checkbox" value="49" name="nb_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Joey's Trucking</td>
                        <td>Pepporini</td>
                        <td>1,000</td>
                        <td>$0.049</td>
                        <td>
                            <div class="radio1" id="radio3">
                                <input type="checkbox" value="49" name="joey_bill" onclick="updateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
            <hr>
            <div id="total"></div>
            <hr>
        </div>
</div>