尝试对表单进行实时计算时，我的总变量出现未定义的变量错误

Question

我想知道你们中的任何一个是否可以提供帮助，因为我目前正在学习有关JavaScript的更多信息。我正在尝试在表单上进行实时计算，因此，当用户单击一个公司时，将只显示该公司的总数。如果用户单击两家公司，则总数将为两家公司的总和。

单击单选按钮时，我可以触发事件，但是我得到的总变量未定义。但是，如果您在我的Codepen的JS部分中看到了，那么我的确在calculateTotal函数下定义了它。有人可以告诉我我做错了吗？

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

数组将只有数字作为索引。对于您的用例，应该是对象。

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()">