Блог

Главная - Вопросы по программированию - Калькулятор подсказок продолжает возвращать NaN. Как исправить ошибки с помощью Nan?

Калькулятор подсказок продолжает возвращать NaN. Как исправить ошибки с помощью Nan?

#javascript

#javascript

Вопрос:

Я пытаюсь создать калькулятор чаевых, и когда я ввожу всю информацию, он не возвращает желаемую сумму. Вместо этого он возвращает Nan. Почему он это делает и что можно сделать, чтобы это исправить?

Я пытался манипулировать кодом JS и HTML, но, похоже, не могу понять, в чем дело 

 var billAmnt = document.getElementById('billAmnt').value;
var serviceQual = document.getElementById('serviceQual').value;
var peopleAmt = document.getElementById('peopleAmt').value;
var total = billAmnt * serviceQual / peopleAmt;

function calculateTip(){
    if(billAmnt === "" || serviceQual === 0){
        alert("Please enter values");
    }
    if(peopleAmt === "" || peopleAmt <= 1){
        peopleAmt = 1;
    }

    document.getElementById('totalTip').style.display = "block";
    document.getElementById('tip').innerHTML = total;
    
    console.log(total);
}


calcButton.addEventListener('click', calculateTip);  
 ```
<section id="Calc">
    <jumbotron id="jumbotron">
            <div id="CalcContainer" class="container">
                    <h1>Tip Calculator</h1>
                    <form action="">
                        <p class="lead mb-40">How much was your bill?</p>
                        <input type="text" id="billAmnt" placeholder="Bill Amount">
                
                        <p class="lead">How was your service?</p>
                        <select id="serviceQual" name="serviceQual">
                            <option disabled selected value="0">-- Choose an Option --</option>
                            <option value="0.3">30% - Outstanding</option>
                            <option value="0.2">20% - It was good</option>
                            <option value="0.15">15% - It was good, but not good enough</option>
                            <option value="0.10">10% - It was not good</option>
                            <option value="0.05">5% - It was terrible, but I'm nice enough to leave a tip</option>
                          </select>
            
                          <p id="numOfPeople"class="lead">How many people are sharing the bill?</p>
                          <input id="peopleAmt" type="text" placeholder="Number of People" > people
                          <div  class="button">
                                <button id="calcButton" type="button" class="btn btn-danger ">Calculate!</button>
                          </div>
            
                          <div id="totalTip">
                            <sup>$</sup><span id="tip">0.00</span>
                            <small id="each">each</small>
                          </div>
                    </form>
                </div>
    </jumbotron>
   
</section>

Комментарии:

1. «NaN» означает не число. Где-то в вашем коде вы, вероятно, переключили тип значения.

2. @Faizanpakiman698Khan Ваши переменные устанавливаются, как только загружается файл сценария, поэтому во входных данных в это время ничего нет, поэтому вы пытаетесь выполнить математику для пустых строк или нулей, вам нужно установить эти значения внутри calculateTip() после проверки проверки.

Ответ №1:

Значения var , которые вы устанавливаете, устанавливаются при загрузке страницы — значения в этих полях, на которые вы ссылаетесь, будут пустыми. Таким образом, при попытке применить арифметические операции к пустым значениям вы вернете результат, который NaN .

Переместите эти var объявления так, чтобы они устанавливались во время выполнения в вашем calculateTip() методе, чтобы значения извлекались при вызове основной функциональности:

 function calculateTip() {
  var billAmnt = document.getElementById('billAmnt').value;
  var serviceQual = document.getElementById('serviceQual').value;
  var peopleAmt = document.getElementById('peopleAmt').value;
  var total = billAmnt * serviceQual / peopleAmt;

  if (billAmnt === "" || serviceQual === 0) {
    alert("Please enter values");
  }
  if (peopleAmt === "" || peopleAmt <= 1) {
    peopleAmt = 1;
  }

  document.getElementById('totalTip').style.display = "block";
  document.getElementById('tip').innerHTML = total;

  console.log(total);
}


calcButton.addEventListener('click', calculateTip);  
 ```
<section id="Calc">
  <jumbotron id="jumbotron">
    <div id="CalcContainer" class="container">
      <h1>Tip Calculator</h1>
      <form action="">
        <p class="lead mb-40">How much was your bill?</p>
        <input type="text" id="billAmnt" placeholder="Bill Amount">

        <p class="lead">How was your service?</p>
        <select id="serviceQual" name="serviceQual">
          <option disabled selected value="0">-- Choose an Option --</option>
          <option value="0.3">30% - Outstanding</option>
          <option value="0.2">20% - It was good</option>
          <option value="0.15">15% - It was good, but not good enough</option>
          <option value="0.10">10% - It was not good</option>
          <option value="0.05">5% - It was terrible, but I'm nice enough to leave a tip</option>
        </select>

        <p id="numOfPeople" class="lead">How many people are sharing the bill?</p>
        <input id="peopleAmt" type="text" placeholder="Number of People"> people
        <div class="button">
          <button id="calcButton" type="button" class="btn btn-danger ">Calculate!</button>
        </div>

        <div id="totalTip">
          <sup>$</sup><span id="tip">0.00</span>
          <small id="each">each</small>
        </div>
      </form>
    </div>
  </jumbotron>

</section>

Ответ №2:

Переменные инициализируются до того, как пользователь сможет их ввести, при загрузке страницы. Просто поместите ваши переменные ( billAmnt , serviceQual , peopleAmt , total ) внутри вашей функции calculateTip

 function calculateTip(){
    var billAmnt = document.getElementById('billAmnt').value;
    var serviceQual = document.getElementById('serviceQual').value;
    var peopleAmt = document.getElementById('peopleAmt').value;
    var total = billAmnt * serviceQual / peopleAmt;


    if(billAmnt === "" || serviceQual === 0){
        alert("Please enter values");
    }
    if(peopleAmt === "" || peopleAmt <= 1){
        peopleAmt = 1;
    }

    document.getElementById('totalTip').style.display = "block";
    document.getElementById('tip').innerHTML = total;
}


calcButton.addEventListener('click', calculateTip);  
 <section id="Calc">
    <jumbotron id="jumbotron">
            <div id="CalcContainer" class="container">
                    <h1>Tip Calculator</h1>
                    <form action="">
                        <p class="lead mb-40">How much was your bill?</p>
                        <input type="text" id="billAmnt" placeholder="Bill Amount">

                        <p class="lead">How was your service?</p>
                        <select id="serviceQual" name="serviceQual">
                            <option disabled selected value="0">-- Choose an Option --</option>
                            <option value="0.3">30% - Outstanding</option>
                            <option value="0.2">20% - It was good</option>
                            <option value="0.15">15% - It was good, but not good enough</option>
                            <option value="0.10">10% - It was not good</option>
                            <option value="0.05">5% - It was terrible, but I'm nice enough to leave a tip</option>
                          </select>

                          <p id="numOfPeople"class="lead">How many people are sharing the bill?</p>
                          <input id="peopleAmt" type="text" placeholder="Number of People" > people
                          <div  class="button">
                                <button id="calcButton" type="button" class="btn btn-danger ">Calculate!</button>
                          </div>

                          <div id="totalTip">
                            <sup>$</sup><span id="tip">0.00</span>
                            <small id="each">each</small>
                          </div>
                    </form>
                </div>
    </jumbotron>

</section>