jQuery的小费计算器 - 与基于文本区输入变量的公式

我发现，是有帮助的几个线程，但没有直接回答我的问题，所以这里的具体问题：jQuery的小费计算器 - 与基于文本区输入变量的公式

磨练我有限的jQuery的技能，我创建拆分账单/提示计算器，根据以下输入计算点击按钮的金额：账单总额，提示百分比，人数。

但是，当我点击按钮时没有任何事情发生。这里是jQuery代码：

$(document).ready(function() { 
$('button').click(function(){ 
var Total = $('.Total').val(); 
var Tip = $('.Tip').val(); 
var NumberOfPeople = $('.NumberOfPeople').val(); 
var AdjTotal = (((Tip/100)*Total)+Total).toFixed(2); 
var Result = (AdjTotal/NumberOfPeople).toFixed(2); 
if(isNaN(AdjTotal)) { 
    $('.result').remove(); 
    $('.error').remove(); 
    $('.price').append('<p class="error">Please enter valid numbers into the above fields.</p>'); 
} 
else { 
    $('.error').remove(); 
    $('.result').remove(); 
    $('.price').append('<p class="result">Your total is $' + AdjTotal + ' ' + 'and each person owes: $' + Result + '.</p>'); 
} 
}); 
});

和HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css" /> 
     <script src='script.js'></script> 
     <title>Split the Bill</title> 
    </head> 
    <body> 
     <div class="header"> 
      <h1>Split the Bill</h1> 
     </div> 
     <div> 
      <table> 
       <tbody> 
        <tr> 
         <td align="right"> 
          Bill Total: $ 
         </td> 
         <td text-align="left"> 
          <input class="Total" type="text" name="Total"> 
         </td> 
        </tr> 
        <tr> 
         <td align="right"> 
          Tip Percentage: 
         </td> 
         <td text-align="left"> 
         <input class="Tip" type="text" name="Tip"> % 
         </td> 
        </tr> 
        <tr> 
         <td align="right"> 
          Number of People: 
         </td> 
         <td colspan=3> 
          <input class="NumberOfPeople" type="text" name="Number of People"> 
         </td> 
        </tr> 
        <tr> 
         <td colspan=4 align="right"> 
          <button>Calculate</button> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="price"> 
     </div> 
    </body> 
</html>

感谢您的帮助！

来源

2013-03-18 dtcode

您正在尝试当你发现自己说：“什么也没有发生使用类选择时，真正的元素应该由它的name属性 – 2013-03-18 15:30:58

引用“，试着在你的代码中插入'console.warn（'test'）'消息或警报，看看它们是否被触发。 – 2013-03-18 15:31:13

的问题是这一行：

var AdjTotal = (((Tip/100)*Total)+Total).toFixed(2);

总计是一个字符串。你需要迫使它是一个数字：

var AdjTotal = (((Tip/100)*Total)+Total/1).toFixed(2);

http://jsfiddle.net/59WXX/

来源

2013-03-18 15:34:25 SteveP

jQuery的小费计算器 - 与基于文本区输入变量的公式

回答

相关问题