Question

我正在尝试制作小费计算器，这会收取小费（通过按钮）和人员总数。虽然当我尝试获取按钮的值进行计算时，我无法这样做。

我试图只在加载时运行该函数，尽管该功能仅在页面加载时为我提供一次按钮的值，而不是在单击页面时给我。

我想做的是知道何时按下按钮，从中获取值，然后将其用于我的进一步计算，尽管尝试这样做时变量未定义并且我不能在主变量中使用它计算功能。

我将如何解决这个问题？

HTML

<h1>Tip Calculator</h1>
<div class="inputs">
  <input type="number" id="bill-amount" placeholder="Bill">
  <div id="buttons">
    <button value="5" class="btn">5%</button>
    <button value="10" class="btn">10%</button>
    <button value="15" class="btn">15%</button>
    <button value="20" class="btn">20%</button>
    <button value="30" class="btn">30%</button>
  </div>
  <input type="number" id="people-amount" placeholder="# Of people" onkeyup="tipCalculator()">
</div>

JS

$("button").click(function() {
   var buttonValue = $(this).val();
   console.log(buttonValue);
});

function tipCalculator() {
   var billAmount = $("#bill-amount").val();
   var peopleAmount = $("#people-amount").val();
   var total = (billAmount * buttonValue) / peopleAmount;
   total = Math.round(total * 100) / 100;
   total = total.toFixed(2);
}

Answer 1

您应该使用全局变量，然后就可以一直读取它。只需从函数中声明它并完成：

var buttonValue;

$("button").click(function() {
   buttonValue= $(this).val();
  console.log(buttonValue);
});

Answer 2

在按钮单击监听器中调用它。使tipCalculator接收一个参数并传递buttonValue值。

function tipCalculator(buttonValue) {
   var billAmount = $("#bill-amount").val();
   var peopleAmount = $("#people-amount").val();
   var total = (billAmount * buttonValue) / peopleAmount;
   total = Math.round(total * 100);
   total = total.toFixed(2);
   alert(total);
}

$("button").click(function() {
   var buttonValue = $(this).val();
   console.log(buttonValue);
   tipCalculator(buttonValue);
});

Answer 3

我认为button是错误的内容。它不会保持状态，也不会向您的用户显示他们所选择的内容。请改用单选按钮。如果将数据发送回服务器以在任何点进行处理，这将变得尤为重要，因为所选择的提示值将丢失，而不将其持久化到另一个表单字段中。

function tipCalculator() {
  var billAmount = $("#bill-amount").val();
  var peopleAmount = $("#people-amount").val();
  //Get the tip value
  var tip = $("[name=rdoTip]:checked").val();  
  tip = (tip/100) + 1;
  console.log("Tip: " + tip);
  var total = (billAmount * tip) / peopleAmount;
  
  total = Math.round(total * 100) / 100 * 2;
  total = total.toFixed(2);
  console.log(total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tip Calculator</h1>
<div class="inputs">
  <input type="number" id="bill-amount" placeholder="Bill">
  <fieldset>
    <legend>Tip</legend>
    <input type="radio" name="rdoTip" value="0" id="rdoTip0" checked /><label for="rdoTip0">0%</label>
    <input type="radio" name="rdoTip" value="5" id="rdoTip5" /><label for="rdoTip5">5%</label>
    <input type="radio" name="rdoTip" value="10" id="rdoTip10" /><label for="rdoTip10">10%</label>
    <input type="radio" name="rdoTip" value="15" id="rdoTip15" /><label for="rdoTip15">15%</label>
    <input type="radio" name="rdoTip" value="20" id="rdoTip20" /><label for="rdoTip20">20%</label>
    <input type="radio" name="rdoTip" value="30" id="rdoTip30" /><label for="rdoTip30">30%</label>
  </fieldset>
</div>
<input type="number" id="people-amount" placeholder="# Of people" onkeyup="tipCalculator()">

您可以使用CSS使其更漂亮

function tipCalculator() {
  var billAmount = $("#bill-amount").val();
  var peopleAmount = $("#people-amount").val();
  //Get the tip value
  var tip = $("[name=rdoTip]:checked").val();  
  tip = (tip/100) + 1;
  console.log("Tip: " + tip);
  var total = (billAmount * tip) / peopleAmount;
  
  total = Math.round(total * 100) / 100 * 2;
  total = total.toFixed(2);
  console.log(total);
}

fieldset.tips {border:none; padding-left:0; margin-top:5px;}
fieldset.tips  legend {margin-left:0;}
fieldset.tips input[type="radio"] {display:none}
fieldset.tips label{padding:5px; border: solid red 1px; margin: 0 2px; border-radius: 5px; width: 40px; display:inline-block; text-align:center;}
fieldset.tips input:checked + label {background-color:red; font-weight:bold; color: #FFF;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tip Calculator</h1>
<div class="inputs">
  <input type="number" id="bill-amount" placeholder="Bill">
  <fieldset class="tips">
    <legend>Tip</legend>
    <input type="radio" name="rdoTip" value="0" id="rdoTip0" checked /><label for="rdoTip0">0%</label>
    <input type="radio" name="rdoTip" value="5" id="rdoTip5" /><label for="rdoTip5">5%</label>
    <input type="radio" name="rdoTip" value="10" id="rdoTip10" /><label for="rdoTip10">10%</label>
    <input type="radio" name="rdoTip" value="15" id="rdoTip15" /><label for="rdoTip15">15%</label>
    <input type="radio" name="rdoTip" value="20" id="rdoTip20" /><label for="rdoTip20">20%</label>
    <input type="radio" name="rdoTip" value="30" id="rdoTip30" /><label for="rdoTip30">30%</label>
  </fieldset>
</div>
<input type="number" id="people-amount" placeholder="# Of people" onkeyup="tipCalculator()">

如何在不同功能中多次使用变量

3 个答案: