javascript - 输入字段未更新

Question

我正在尝试使用 HTML 和 Javascript 创建一个小费计算器，每次用户更改餐费和小费金额的输入字段时，我都必须验证它是否是数字，如果是数字，我有将数字减少到小数点后两位。

   <script>
            function validateMealCost(mealCharge){
                var mealCost = document.getElementById(mealCharge).value;
                if (isNaN(mealCost)){
                    alert("The cost of the meal has to be a number.");
                    location.reload();
                }
                mealCost = mealCost.toFixed(2);
                return mealCost;
            }

            function validateTipPercent(tipPercent){
                var tipPercent = document.getElementById(tipPercent).value;
                if (isNaN(tipPercent)){
                    alert("The tip percentage has to be a number.");
                    location.reload();
                }
                if (tipPercent >= 1.0){
                    alert("You are very generous.");
                }
                tipPercent = tipPercent.toFixed(2);
                return tipPercent;
            } 

            function calculateTipAmount(mealCharge, tipPercent){
                var tipAmount;
                var mealCost = document.getElementById(mealCharge);
                var tipPercentage = document.getElementById(tipPercent);
                tipAmount = mealCost * tipPercentage;
                document.getElementById('tipAmount').value = tipAmount;
            }
        </script>


        <input type="text" id="mealCharge" onchange="validateMealCost('mealCharge');" />
            <input type="text" id="tipPercentage" onchange="validateTipPercent('tipPercentage');" />
    <button onclick="calculateTipAmount('mealCharge','tipPercentage');">Calculate</button>
    <input type="text" id="tipAmount" style="text-align: right;"/>

我认为它没有采用使用 toFixed() 编辑的值，并且字段tipAmount 显示为NaN。我该如何修复这些错误？

Answer 1

 <script>
            function validateMealCost(mealCharge){
                var mealCost = document.getElementById(mealCharge).value;
                if (isNaN(mealCost)){
                    alert("The cost of the meal has to be a number.");
                    location.reload();
                }
                mealCost = parseInt(mealCost).toFixed(2);
                return mealCost;
            }

            function validateTipPercent(tipPercent){
                var tipPercent = document.getElementById(tipPercent).value;
                if (isNaN(tipPercent)){
                    alert("The tip percentage has to be a number.");
                    location.reload();
                }
                if (tipPercent >= 1.0){
                    alert("You are very generous.");
                }
                tipPercent = parseInt(tipPercent).toFixed(2);
                return tipPercent;
            } 

            function calculateTipAmount(mealCharge, tipPercent){
                var tipAmount;
                var mealCost = document.getElementById(mealCharge).value;
                var tipPercentage = document.getElementById(tipPercent).value;
                tipAmount = mealCost * tipPercentage;
                document.getElementById('tipAmount').value = tipAmount;
            }
        </script>


        <input type="text" id="mealCharge" onchange="validateMealCost('mealCharge');" />
            <input type="text" id="tipPercentage" onchange="validateTipPercent('tipPercentage');" />
    <button onclick="calculateTipAmount('mealCharge','tipPercentage');">Calculate</button>
    <input type="text" id="tipAmount" style="text-align: right;"/>

validateMealCost 和 validateTipPercent 函数缺少将值转换为数字的 parseInt，而 calculateTipAmount 函数缺少 .value，将其转换为 NaN。