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的结果。

移动这些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>

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>

提示计算器不断返回NaN。如何用Nan修复错误？

2 个答案: