我的小费计算器代码不起作用。代码中的错误在哪里？-解网

问：

我认为代码的两个问题是它没有保存输入值，因此代码没有显示任何结果，其次，每次从下拉列表中只选择第一个选项。请让我知道代码中的错误。我是编码新手。

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tip Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css"  />
  </head>
  <body>
    <form>

      <div class="mb-3">
        <label  class="total form-label">Total Bill</label>
        <input type="number" class="form-control" id="bill" >
        <div id="emailHelp" class="form-text">Please Enter your bill in numbers only.</div>
      </div>
      <div class="mb-3">
        <label class="form-label">Number of People</label>
        <input type="number" class="form-control" id="people">
      </div>
      <!-- <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div> -->
      <select class="form-select" id="myValues">
        <option value="30%">Select the service quality</option>
    <option value="30%">30% - Outstanding</option>
    <option value="20%">20% - Good</option>
    <option value="15%">15% - it was okay</option>
    <option value="5%">5% - Terrible</option>
  </select>
      <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
    <div id="totalTip">
                       <sup>$</sup><span class="form-label" id="tip">0.00</span>
                       <small id="each">each</small>

               </div>

  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="tip.js" charset="utf-8"></script>
</html>

这是 javascript 代码

var a = $("#bill").val();
var b = $("#people").val();
var c = $("#myValues").find('option:selected').val();

$(".btn").click(function () {
$("#tip").html(calculateTip(a, b, c));
});
function calculateTip (total, people, select) {
     var d = total/people;
     var e = d*(select/100);
     return e;
}
// calculateTip(a, b, c)

JavaScript HTML jQuery 数学计算器

在脚本的开头，在用户与窗体交互之前定义 A、B 和 C。我们应该在点击处理程序中定义，这样当单击按钮时，它们将被评估和设置。
您可能希望在单击处理程序内部添加一个以停止默认提交行为（即阻止它尝试提交表单）e.preventDefault();
您无需为 #myValues 查找所选选项，您可以直接通过以下方式访问当前选择的值$("#myValues").val()
您需要从选项值中删除，以便您可以使用该值进行数学运算（您将获得 NaN 和 inplace，使该值成为字符串。%%
您可能需要在提示结果中添加 a，以强制其四舍五入到小数点后 2 位并截断，以避免长重复小数.toFixed(2)

$(".btn").click(function(e) {
  e.preventDefault();
  let a = $("#bill").val();
  let b = $("#people").val();
  let c = $("#myValues").val();
  let tip = calculateTip(a, b, c);
  $("#tip").html(tip);
});

function calculateTip(total, people, select) {
  var d = total / people;
  var e = d * (select / 100);
  return e.toFixed(2);
}

<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Tip Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <form>

      <div class="mb-3">
        <label class="total form-label">Total Bill</label>
        <input type="number" class="form-control" id="bill">
        <div id="emailHelp" class="form-text">Please Enter your bill in numbers only.</div>
      </div>
      <div class="mb-3">
        <label class="form-label">Number of People</label>
        <input type="number" class="form-control" id="people">
      </div>
      <!-- <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div> -->
      <select class="form-select" id="myValues">
        <option value="30">Select the service quality</option>
        <option value="30">30% - Outstanding</option>
        <option value="20">20% - Good</option>
        <option value="15">15% - it was okay</option>
        <option value="5">5% - Terrible</option>
      </select>
      <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
    <div id="totalTip">
      <sup>$</sup><span class="form-label" id="tip">0.00</span>
      <small id="each">each</small>

    </div>

  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</html>

我的小费计算器代码不起作用。代码中的错误在哪里？

My tip calculator code is not working. Where is the error in the code?

评论

评论