Javascript Калькулятор подоходного налога

Question

Я надеялся, что кто-то может быстро взглянуть на это и дать мне несколько указаний на то, что я делаю неправильно. Я попытался выполнить программу калькулятора наконечника, которую я нашел в JS Fiddle, и она работала до такой степени, что я пытался выполнить расчет.

Любые советы были бы полезны!

Спасибо!

JSFiddle: http://jsfiddle.net/Shibi/pg6hg7hg/63/

HTML:

<form id="calculator" method="post"> 

<div> 
<p><input value="" id="income"></input></p> 

</div> 

<select id="states" onchange="changetax(this)"> 
    <option>Choose state</option> 
    <option value="0.4">Alabama</option> 
    <option value="0">Alaska</option> 
    <option value="0.56">Arizona</option> 
    <option value="0.65">Arkansas</option> 
</select> 
<div id="tax"></div> 
<p><input type="submit" /></p> 
    <hr /> 

<p>Taxed Amount: <div id="tax"></div></p> 
<p>Total: <div id="total"></div></p> 


</form> 

JS:

function changetax($this){ 

    $("#tax").text($this.value>0?("Income Tax: " + $this.value + "%") : ""); 
} 

function calculate() { 

var income = $('#income').val(); 
var tax = $('#tax').val(); 
var taxedAmount = income*tax; 
var total = income - taxedAmount; 

} 

$('#calculator').submit(calculate); 

Answer 1

Я сразу вижу 2 вопроса.

1. Ваш div и ваш ввод оба имеют идентификатор «доход», идентификаторы должны быть уникальными.
2. Вы выполняете математику на «строках», либо анализируете их на int с помощью parseInt(), либо умножаете значение на 1 (val * 1), чтобы получить хорошее число.

Ниже приведен пример использования (val * 1) и parseInt() с очень общей проверкой.

function changetax($this){ 

    $("#tax").text($this.value>0?("Income Tax: " + $this.value + "%") : ""); 
} 

function calculate() { 

var incomestr = $('#income').val(); 
var taxstr = $('#tax').val(); 

// convert values to int 
var income = (incomestr*1);  
var tax = parseInt(taxstr); 

if(income > 0 && tax > 0){  
var taxedAmount = income*tax; 
var total = income - taxedAmount; 
} 

} 

$('#calculator').submit(calculate); 

Edit:

Хорошо, я оставлю в приведенном выше примере, но здесь это рабочий пример того, что вы пытаетесь сделать. Мне пришлось кое-что изменить.

1. У вас были «налоговые» и «доходные» идентификаторы в 2-х местах, я оставил только один из них.
2. Вы пытались использовать div .val(), вы можете использовать .text(), а .val() работает только с элементами со значением.
3. Ваша строка «Налог на прибыль: ..» была в вашем «налоговом» идентификаторе, который не является числом, я изменил налоговое поле на «облаговое» и указал там значение.
4. Ваши налоговые значения фактически существовали на вашем идентификаторе состояний, поэтому я обновил налоговую переменную, чтобы вместо этого посмотреть на состояние состояний.
5. Ваша скрипка не работала как отправка формы, я удалил submit и сделал это мероприятием, чтобы он мог работать на демонстрации.
6. Попробуйте использовать интервалы для текстовых значений, где это возможно, divs являются элементами блока, и вы столкнетесь с проблемами с макетом в будущем, хотя это не имеет никакого отношения к этому примеру, просто примечание.

jsFiddle: http://jsfiddle.net/lookitstony/chn3t025/

Html:

<div> 
    <p><input value="" id="income"></input></p>  
</div> 

<select id="states" onchange="changetax(this)"> 
    <option>Choose state</option> 
    <option value="0.4">Alabama</option> 
    <option value="0">Alaska</option> 
    <option value="0.56">Arizona</option> 
    <option value="0.65">Arkansas</option> 
</select> 

<div id="tax"></div> 
<p><button id="calculator">Calculate</button></p> 

<hr /> 

<p>Taxed Amount: <span id="taxed"></span></p> 
<p>Total: <span id="total"></span></p> 

Javascript:

function changetax($this){ 

    $("#tax").text($this.value>0?("Income Tax: " + $this.value + "%") : ""); 
} 

function calculate(e) { 
    e.preventDefault(); 

    var income = $('#income').val(); 
    var tax = $('#states').val(); 
    var taxedAmount = income*tax; 
    var total = income - taxedAmount; 
    $('#taxed').text(taxedAmount); 
    $('#total').text(total); 
    return false; 
} 
$(function(){ 
$('#calculator').click(calculate); 
}); 

Почти забыл это, я стараюсь ссылаться на него в каждом JS вопрос я ответить, как это сделал значительное влияние на мои навыки JS. Вот некоторые шаблоны дизайна, которые сохранят вашу жизнь. http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript

Answer 2

Первое, что выделяется для меня является то, что у вас есть несколько элементов с одинаковым атрибутом id; это будет означать, что когда вы делаете такие вещи, как $('#income').val(), вы можете выбрать div с этим ID вместо ввода, который вы хотите.

Убедитесь, что идентификаторы всегда уникальны.