提示计算器 jquery 不起作用答案

【问题标题】：Tip Calculator jquery not working提示计算器 jquery 不起作用
【发布时间】：2015-01-28 00:25:55
【问题描述】：

我正在尝试使用 jquery 创建一个简单的小费计算器。当我按下提交按钮时，我收到一个 JavaScript 警报，说 NaN。不知道我做错了什么。我该如何解决？非常感谢。

<head>
<meta name="description" content="tip calculator" />
<meta name="keywords" content="tip, calculator" />
<meta charset="utf-8" />
<title>Tip Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="tipcalc.js"></script>
</head>
<body>
<div class="entries">
    Enter Bill Amount: <input type="text" /> <br><br>
    Enter Tip Percent: <input type="text" /> <br><br>
    <input type="button" value="Calculate Tip" id="submit" />
</div>
<script>
var total = $("#total").val();
var tip = $("#tip").val();
var amount = total + (tip / 100);
$("#submit").click(
function() {alert(amount);
});
</script>

【问题讨论】：

标签： javascript jquery calculator

【解决方案1】：

记得为你的输入设置 id 标签：

<div class="entries">
    Enter Bill Amount: <input id="total" type="text" /> <br><br>
    Enter Tip Percent: <input id="tip" type="text" /> <br><br>
    <input type="button" value="Calculate Tip" id="submit" />
</div>

并使用parseFloat 将值转换为数字：

$("#submit").click(function(){
   var total = parseFloat($("#total").val());
   var tip = parseFloat($("#tip").val());
   var amount = total + (tip / 100);
   alert(amount);
});

另外，请注意我将您的变量移到了事件处理程序的内部。

【讨论】：

太棒了。这做到了。我不得不将金额变量更改为等于总计 +（小费 / 100 * 总计），但除此之外效果很好。

【解决方案2】：

您似乎没有 id 为“total”或“tip”的 div，
替换：

Enter Bill Amount: <input type="text" /> <br><br>
Enter Tip Percent: <input type="text" /> <br><br>

与：

Enter Bill Amount: <input type="text" id="total"/> <br><br>
Enter Tip Percent: <input type="text" id="tip"/> <br><br>

【讨论】：