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

问题描述

我想知道你们中的任何人是否可以提供帮助，因为我目前正在学习更多关于 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';
}

标签： javascriptformsreal-time

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

问题描述

解决方案

推荐阅读