Получение неопределенной переменной переменной для моей общей переменной при попытке выполнить расчет в реальном времени в моей форме

Question

Мне было интересно, может ли кто-нибудь из вас помочь, поскольку сейчас я больше узнаю о JavaScript. Я пытаюсь выполнять расчеты в форме в реальном времени, поэтому, когда пользователь нажимает на одну компанию, итоговая сумма будет отображаться только для этой компании. Если пользователь нажимает на две компании, общее количество будет равно двум компаниям.

Я могу вызвать событие при нажатии переключателя, но получаю, что моя общая переменная не определена. Однако, если вы видите в части JS моего Codepen, я определил его с помощью функции convertTotal. Может кто-нибудь сказать мне, что я делаю не так?

https://codepen.io/tacoholic/pen/RwWxbjj?editors=1011

 <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="montlhybillform" onsubmit="return false">
                <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" id="acmeradio"name="selectedbill" value="Acmemonthly" onclick="calculateTotal()">
                                <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" id="nbradio"name="selectedbill" value="Nbmonthly" onclick="calculateTotal()">
                                <label for="regular">49.00</label>
                            </div>
                        </td>
                    </tr>

                </table>
            </form>
            <hr>
            <div id="totalPrice"></div>
            <hr>
        </div>
</div>



  Javascript

    var total_bill =  new Array();
        total_bill["AcmeMonthly"] = 390.00;
        total_bill["NbMonthly"] = 49.00;

    function getMonthlyTotal() {
            var monthlyRadio = document.getElementsByName('selectedbill');
            for (i = 0; i < monthlyRadio.length; i++) {
                if (monthlyRadio[i].checked) {
                    user_input = monthlyRadio[i].value;
                }
            }
            return total_bill[user_input];
        }

          function calculateTotal() {
            var total = getMonthlyTotal();
            var totalEl = document.getElementById('totalPrice');
            document.getElementById('totalPrice').innerHTML = "Your Total is: $" + total;
            total.style.display = 'block';
        }

        function hideTotal() {
        var total = document.getElementById('totalPrice');
            total.style.display = 'none';
}

Answer 1

Здесь много чего не так. Для начала, значение первой радиокнопки устанавливается в html на Acmemonthly, а не на числовое значение, которое вы хотите, чтобы оно представляло.

Вы просматриваете по числовому индексу, но сохраняете по названному свойству , total_bill["AcmeMonthly"] === 390.00; но total_bill[0] === undefined

Answer 2

Возвращает неопределенное значение, поскольку значение переключателя установлено на Acmemonthly, а свойство объекта - AcmeMonthly (то же самое для второго). Изменение это работает (я проверил это). Тем не менее, я настоятельно советую вам не работать таким образом.

Answer 3

Массив будет иметь только номер в качестве индекса. Для вашего случая использования это должен быть объект.

var total_bill =  {};
total_bill["AcmeMonthly"] = 390.00;
total_bill["NbMonthly"] = 49.00;

И значение во флажке ввода должно совпадать с этими ключами в объекте

<input type="radio" id="acmeradio"name="selectedbill" value="AcmeMonthly" onclick="calculateTotal()">
<input type="radio" id="nbradio"name="selectedbill" value="NbMonthly" onclick="calculateTotal()">

, или вы можете попробовать наоборот

    var total_bill =  [];
    total_bill[0] = 390.00;
    total_bill[1] = 49.00;

     <input type="radio" id="acmeradio"name="selectedbill" value=0 onclick="calculateTotal()">
     <input type="radio" id="nbradio"name="selectedbill" value=1 onclick="calculateTotal()">