Javascript 提示计算器不断返回。我怎么修理它？

我正在尝试做我的第一个JS应用程序，不幸的是JS返回的是NaN值，而不是期望的数量。我打赌这个解决方案相当简单，尽管我在过去的两个小时里一直试图自己解决这个问题，但什么都不管用

函数计算IP（）{
var成本=document.querySelector（“.amount”）.value；
var service=document.querySelector（'.service'）.value；
var people=document.querySelector（'.numOfPeo'）.value；
风险值提示=（成本*服务）/人；
如果（成本===“”| |服务===0）{
警报（“请输入值”）；
}
如果（人==“”| | peopleHTML中带有class
amount
的第一个元素是
div
，而不是
input
。input

在

div

中。因此

成本
未定义，因为
div
没有
值。同样的问题也发生在
people
中，因为获取
。numOfPeo
位于
div
上，而不是
输入

您需要以输入为目标。在不更改HTML的情况下，您可以使用子代选择器：

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

实例：


函数计算IP（）{
var成本=document.querySelector（“.amount input”）.value；
var service=document.querySelector（'.service'）.value；
var people=document.querySelector（'.numOfPeo input'）.value；
风险值提示=（成本*服务）/人；
如果（成本===“”| |服务===0）{
警报（“请输入值”）；
}
如果（people==“”| | people您只是对类有一个小问题，那么它应该在输入上，而不是在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>


小费计算器
你的账单是多少

你的服务怎么样

选择一个选项
非凡！-30%
太棒了！-20%
良好-15%
还行-10%
糟透了！-5%
有多少人共用一张账单？
算算！
$0.00
每个


您应该在计算尖端之前移动验证：

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);

函数计算IP（）{
var成本=document.querySelector（“.amount”）.value；
var service=document.querySelector（'.service'）.value；
var people=document.querySelector（'.numOfPeo'）.value；
如果（成本===“”| |服务===0）{
警报（“请输入值”）；
}
if（people==“”| | people当您读取元素的
值
属性时，它返回一个字符串。使用一元
+
运算符或
parseInt（）
将它们转换为数字。为什么“if（people==”| | people@Terry-尽管在上面，由于只使用了
*
和
/
，它们将被隐式转换为数字。但是，最好是显式的。tomgru23列出了各种不同的方法。将输入从字符串转换为实际数字（假设您首先正确获得它们）通过使用Javascript的
parseFloat
或
parseInt
内置函数。最初，输入是文本、字符串，它们不是可以添加或相乘的数字，因此您需要首先将它们转换为数字，否则结果将为Nan=不是数字