输入字段未更新

Input field not updating

本文关键字：更新 字段 输入      更新时间：2023-09-26

我正试图使用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。如何修复这些错误？

 <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函数缺少将其转换为NaN的.value。

您需要解析输入-所有文本输入都将提供字符串，因此不能作为数字与其他数字进行比较-它们不能是那种形式，也不能用于计算。还要注意，即使您使用了一个数字进行计算，使用.toFixed（）也会将该数字转换为字符串。

例如，您需要使用parseInt或parseFloat，它们将返回一个数字：

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

它不更新，因为您需要在脚本之前声明输入。因此，简单的解决方法是将整个<script>标签移动到<input>最后一次出现的位置下方。

您可以使用W3Schools Tryit编辑器模拟结果，并粘贴代码片段：

<!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。

相关文章：