JQuery Tip Calculator - Формулы с переменными на основе TextArea входов

Я нашел несколько потоков, которые были полезны, но ничего не ответил прямо на мой вопрос, так вот конкретный вопрос:JQuery Tip Calculator - Формулы с переменными на основе TextArea входов

Чтобы отточить мои ограниченные навыки JQuery Я создаю Разделите калькулятор Bill/Tip Calculator, который вычисляет суммы нажатием кнопки на основе следующих входных данных: сумма счета, процент опроса, количество людей.

Однако ничего не происходит, когда я нажимаю кнопку. Вот код 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

Вы пытаетесь использовать селектор класса, когда на самом деле элемент должен ссылаться на его имя атрибута –

Когда вы оказываетесь поговорку «ничего не происходит ", попробуйте вставить в свой код' console.warn ('test') 'сообщения или предупреждения, чтобы узнать, запущены ли они. –

Проблема эта линия:

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 Tip Calculator - Формулы с переменными на основе TextArea входов

ответ

Смежные вопросы