我的小費計算器代碼不起作用。代碼中的錯誤在哪里？

Question

我認為代碼的兩個問題是它沒有保存輸入值，因此代碼沒有顯示任何結果，其次從下拉列表中每次只選擇第一個選項。 請讓我知道代碼中的錯誤。 我是編碼新手。

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tip Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/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)

Answer 1

有幾個問題很突出。

在用戶與表單交互之前，在腳本的開頭定義 a、b 和 c。 然后我們應該在點擊處理程序中定義，這樣當點擊按鈕時它們將被評估和設置。
您可能需要添加一個e.preventDefault(); 在點擊處理程序中停止默認提交行為（即阻止它嘗試提交表單）
您不需要為#myValues 找到選定的選項，您可以直接通過$("#myValues").val()訪問當前選定的值
您需要從選項值中刪除% ，以便您可以使用該值進行數學運算（您將獲得 NaN ，其中%使該值成為字符串。
您可能希望在提示結果中添加.toFixed(2)以強制它舍入並截斷小數點后 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/bootstrap@5.2.0-beta1/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>

我的小費計算器代碼不起作用。代碼中的錯誤在哪里？

問題描述

1 個解決方案

解決方案1
0 2022-09-10 08:01:52

我的小費計算器代碼不起作用。 代碼中的錯誤在哪里？

問題描述

1 個解決方案

解決方案1 0 2022-09-10 08:01:52

我的小費計算器代碼不起作用。代碼中的錯誤在哪里？

解決方案1
0 2022-09-10 08:01:52