Question

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

   <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

您需要解析输入 - 所有文本输入都将提供字符串，因此无法与其他数字进行比较，因为数字不能以该形式进行比较，也不能用于计算。另请注意，即使您使用了数字进行计算，使用.toFixed（）也会将该数字转换为字符串。

例如 - 你需要使用parseInt或parseFloat来返回一个数字：

var tipPercent = parseInt(document.getElementById(tipPercent).value);

Answer 2

 <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

Answer 3

它没有更新，因为您需要在脚本之前声明输入。因此，对此的简单修复是将整个<script>标记移动到最后一次出现的<input>下面。

您可以使用W3Schools Tryit Editor模拟结果并粘贴代码片段：

<!DOCTYPE html> <html> <body> The content of the body element is displayed in your browser. <input type="text" id="tipAmount" /> <script> document.getElementById('tipAmount').value = 5*5; document.getElementById('tipAmount2').value = 5*5; </script> <input type="text" id="tipAmount2" /> </body> </html>

请注意代码仅更新tipAmount而非tipAmount2。

输入字段未更新

3 个答案: