Поле ввода не обновляется

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.

Answer 2

Вам необходимо разобрать входные данные - все текстовые входы предоставят строки и, следовательно, не могут сравниться с другими номерами как число, они не могут быть в этой форме и не могут использоваться для расчетов. Также обратите внимание, что даже если вы использовали число для вычисления, использование .toFixed() преобразует это число в строку.

Для примера - вам нужно будет использовать ParseInt или parseFloat, который возвращает номер:

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

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.