小費計算器不斷返回南。 我如何解決它？

Question

我正在嘗試做我的第一個 JS 應用程序，不幸的是 JS 返回 NaN 值而不是所需的數量。 我敢打賭解決方案很簡單，盡管過去 2 個小時我一直試圖自己解決問題，但沒有任何效果......

 function calculateTip () { var cost = document.querySelector('.amount').value; var service = document.querySelector('.service').value; var people = document.querySelector('.numOfPeo').value; var tip = (cost * service) / people; if (cost === "" || service === 0) { alert("Please enter values"); } if (people === "" || people <= 1) { people = 1; } document.getElementById('totalTip').style.display = "block"; document.getElementById('tip').innerHTML = tip; } btn.addEventListener('click', calculateTip);

 <div class="container"> <h1>Tip Calculator</h1> <div class="descr-1"><p>How Much was your bill?</p></div> <div class="input-1 amount"><input type="text" placeholder="Bill Amount in £"></div> <div class=descr-2><p>How was your service?</p></div> <div class="select"> <select class="service"> <option disabled selected value="0">Choose an Option</option> <option value="30">Extraordinary! - 30%</option> <option value="20">Amazing! - 20%</option> <option value="15">Good - 15%</option> <option value="10">Was Ok - 10%</option> <option value="5">Awful! - 5%</option> </select></div> <div class="descr-3">How many people sharing a bill?</div> <div class="people numOfPeo"> <input type="text" placeholder="Number of People"></div> <button id="btn">Calculate!</button> <div class="total"> <div id="totalTip"> <sup>$</sup><span id="tip">0.00</span> <small id="each">each</small> </div> </div>

Answer 1

你只是對這個類有一個小問題，它應該在輸入上而不是在 div 上。 我已經在我的 jsfiddle 上修復了它：

 <div class="container">
  <h1>Tip Calculator</h1>
  <div class="descr-1"><p>How Much was your bill?</p></div>
  <div class="input-1"><input type="text" placeholder="Bill Amount in £" class="amount"></div>
  <div class=descr-2><p>How was your service?</p></div>
  <div class="select"> <select class="service">
      <option disabled selected value="0">Choose an Option</option>
      <option value="30">Extraordinary! - 30%</option>
      <option value="20">Amazing! - 20%</option>
      <option value="15">Good - 15%</option>
      <option value="10">Was Ok - 10%</option>
      <option value="5">Awful! - 5%</option>
  </select></div>
  <div class="descr-3">How many people sharing a bill?</div>
  <div class="people"> <input type="text" placeholder="Number of People" class="numOfPeo"></div>
  <button id="btn">Calculate!</button>
  <div class="total">
      <div id="totalTip">
          <sup>$</sup><span id="tip">0.00</span>
          <small id="each">each</small>
        </div>

並且您應該在計算小費之前移動驗證：

function calculateTip () {
var cost = document.querySelector('.amount').value;
var service = document.querySelector('.service').value;
var people = document.querySelector('.numOfPeo').value;


if (cost === "" || service === 0) {
    alert("Please enter values");
  }
  if (people === "" || people <= 1) {
    people = 1;
  }
  var tip = cost * service/ people;

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

btn.addEventListener('click', calculateTip);

https://jsfiddle.net/arielbo/qaf6eygc/13/

Answer 2

HTML 中具有 class amount的第一個元素是div ，而不是input 。 input在div 。 所以cost是undefined ，因為div沒有value 。 people也會出現同樣的問題，因為.numOfPeo再次位於div ，而不是input 。

您需要針對您的輸入。 在不更改 HTML 的情況下，您可以使用后代子選擇器：

var cost = document.querySelector('.amount input').value;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^
var service = document.querySelector('.service').value;
var people = document.querySelector('.numOfPeo input').value;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^

現場示例：

 function calculateTip () { var cost = document.querySelector('.amount input').value; var service = document.querySelector('.service').value; var people = document.querySelector('.numOfPeo input').value; var tip = (cost * service) / people; if (cost === "" || service === 0) { alert("Please enter values"); } if (people === "" || people <= 1) { people = 1; } document.getElementById('totalTip').style.display = "block"; document.getElementById('tip').innerHTML = tip; } btn.addEventListener('click', calculateTip);

 <div class="container"> <h1>Tip Calculator</h1> <div class="descr-1"><p>How Much was your bill?</p></div> <div class="input-1 amount"><input type="text" placeholder="Bill Amount in £"></div> <div class=descr-2><p>How was your service?</p></div> <div class="select"> <select class="service"> <option disabled selected value="0">Choose an Option</option> <option value="30">Extraordinary! - 30%</option> <option value="20">Amazing! - 20%</option> <option value="15">Good - 15%</option> <option value="10">Was Ok - 10%</option> <option value="5">Awful! - 5%</option> </select></div> <div class="descr-3">How many people sharing a bill?</div> <div class="people numOfPeo"> <input type="text" placeholder="Number of People"></div> <button id="btn">Calculate!</button> <div class="total"> <div id="totalTip"> <sup>$</sup><span id="tip">0.00</span> <small id="each">each</small> </div> </div>

...但我可能會改為更改 HTML。

---

我還建議將cost 、 service和people顯式轉換為數字，而不是依賴隱式轉換。 我在這里的回答概述了您這樣做的各種選擇及其權衡。

另請注意，您需要將service除以 100 以使其成為百分比（“百分比”字面意思是“每百人”）。 否則，這些提示將是大量的。 ;-)