자바 스크립트 소득세 계산기

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와 입력에 모두 '수입'ID가 있으며 ID는 고유해야합니다.
2. "strings"에서 수학 연산을하고 parseInt()를 사용하여 int를 구문 분석하거나 좋은 수를 얻기 위해 값에 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); 

편집 :

좋아 내가 위의 예를 떠날 것이다 그러나 여기 당신이 뭘하려고했는지의 작업 예입니다. 나는 몇 가지를 바꿔야했다.

1. '세금'과 '수입'ID가 2 곳에서 나왔는데 각각 하나만 남았습니다.
2. .val() div를 사용하려고했으나 .text() 대신 .val()을 사용할 수 있으며 value 속성이있는 요소에서만 작동합니다.
3. "소득세 : .."문자열이 숫자가 아닌 '세금'ID에 있었기 때문에 세금 필드를 '과세 세금'으로 변경하고 그 값을 지적했습니다.
4. 'states'id에 실제로 세금 값이 존재하므로 tax 변수를 업데이트하여 상태 값을 대신 보았습니다.
5. 귀하의 바이올린은 양식을 게시 할 때 작동하지 않으며, 제출을 취소하고 이벤트로 설정하여 데모 용으로 사용할 수 있습니다.
6. 가능한 경우 div에 블록 값을 사용하고 향후 레이아웃에 문제가 발생할 수 있으므로 텍스트 값에는 span을 사용하십시오. 단,이 예에서는 아무런 참고가 없습니다.

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> 

자바 스크립트 :

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()과 같은 작업을 수행 할 때 입력 대신 해당 ID로 div을 선택할 수 있습니다. 이는 원하는 것입니다.

ID는 항상 고유해야합니다.