提示计算器不断返回 NaN.如何修复 Nan 的错误

Question

我正在尝试创建一个小费计算器，当我输入所有信息时，它没有返回所需的金额。相反，它返回了 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>

Answer 1

您

正在设置的var是在页面加载时设置的 - 您引用的这些字段中的值将为空。因此，当尝试对空白值应用算术运算时，您将返回一个NaN的结果。

在 calculateTip() 方法中移动要在运行时设置的这些var声明，以便在调用主要功能时拉取值：

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>

Answer 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>