Javascript 如何在不同的函数中多次使用变量

我正在尝试做一个小费计算器，它包含了一顿饭的总费用，一个小费（通过一个按钮）和总人数。虽然当我试图获取按钮的值以进行计算时，我无法这样做

我试着只在加载时运行函数，尽管这只在页面加载时给我一次按钮的值，而不是在单击它时

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

我该如何着手解决这个问题

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>

---

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

var buttonValue;

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

---

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

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

---

在我看来，

按钮

是错误的元素。它不会维护状态，也不会向用户显示他们选择的内容。改用单选按钮。如果在任何时候将数据发送回服务器进行处理，则这一点更为重要，因为选定的tip值将丢失，而不会保留到另一个表单字段中

函数tipCalculator（）{
var billAmount=$（“#账单金额”）.val（）；
var peopleAmount=$（“#人员金额”）.val（）；
//获取提示值
var tip=$（“[name=rdoTip]：选中”）.val（）；
小费=（小费/100）+1；
控制台日志（“提示：+Tip”）；
var总额=（billAmount*tip）/peopleAmount；
总计=数学四舍五入（总计*100）/100*2；
总计=总计。toFixed（2）；
控制台日志（总计）；
}

小费计算器
提示
0%
5%
10%
15%
20%
30%

只需从鼠标内部调用tipCalculator函数event@CalebH. 我以前做过，但它不起作用？我添加了

tipCalculator（）

在my console.log之后，您需要将该值作为参数传递给

tipCalculator

函数。这就是Caleb的意思你没有在任何地方记录“total”变量的值，所以你不会看到任何值output@JacquesAndre-Danieland的回答解决了你的问题，你也接受了，但如果他说“你应该使用全局var”，我会说“你可以使用全局var”。。。因为您真的不应该*使用全局变量。

tipCalculator

应该传递参数，并以jamesjaya的答案的方式返回小费金额（或者，可以说，总的w/tip）。如果你是编程新手，你很快就会发现问题所在。（但我不会说永远不要使用它们）

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