페이지에서 한 레이블의 텍스트 만 설정할 수 있습니다.

Question

나는 꽤 이상한 문제가 있습니다. 나는 값을 입력 할 수있는 두 개의 필드를 가지고 있으며 두 개의 별도 레이블에 계산 된 값을 표시하려고합니다 (다른 계산).

그러나 값 중 하나만 표시되고 있습니다.

HTML :

<input id="btcowned" /> 


<p> 
    Fee<br /> 
    <input id="feebox" value="4.5" /> 
</p> 

<p> 
    Transfer 
<label id="totalnetworth" style="font-weight: bold;" /> 
    (no vat)<br /> 
    <label id="totalnetworthVat" style="font-weight: bold;" /> 
    (vat)<br /> 
</p> 

JAVASCRIPT :

<script> 
    $(document).ready(function() { 
     $('#btcowned').keyup(function() { 
      updateNumbers(); 
     }); 
     $('#feebox').keyup(function() { 
      updateNumbers(); 
     }); 


    }); 

    function updateNumbers() { 
     var chosen = $('#btcowned').val(); 
     var fee = parseFloat($('#feebox').val()); 

     var val = chosen - ((chosen * fee)/100); 
     var vatVal = val * (1 + 0.025); 

     $('#totalnetworth').text(val); 
     $('#totalnetworthVat').text(vatVal); 

     alert(vatVal); 

    } 
</script> 

totalnetworth가 잘 작동하고 계산 된 값을 보여줍니다. totalnetworthVat는 아무것도 표시하지 않습니다. 나는 또한 $ ('# totalnetworthVat'). text ('foo')와 같이 vatVal을 작성하는 것보다 간단한 작업을 시도했습니다.

아무 것도 표시되지 않고 FireBug에 JS 오류가 표시되지 않습니다.

내 경고()는 vatVal이 실수임을 보여줍니다.

아이디어가 있으십니까?

<label id="totalnetworth" style="font-weight: bold;"></label> 

... 그 다음 작동하는 것 같다 : 당신이 그것을 변경하는 경우

<label id="totalnetworth" style="font-weight: bold;" /> 

:

Answer 1

나는 문제가 자기 닫는 태그 생각 http://jsfiddle.net/GRFda/

내 이해는 doc 유형이 xhtml 인 경우가 아니면 작동하지 않는자가 닫는 태그이며, 심지어 페이지가 MIME 유형이 text/xml 또는 01로 제공되지 않으면 작동하지 않을 것입니다..

Answer 2

저는 꽤 많은 계산기를 만들었습니다. 그래서 나는 좀 더 많은 작업을했습니다.

내 해결책을보십시오 jsFiddle에서보십시오. 코드에 대한

<style type='text/css'> 
table td, 
table th { 
    border: 1px solid #DDD; 
    padding: 2px 5px; 
} 
.totalnetworth .value { 
    font-weight: bold; 
} 
</style> 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(document).ready(function() { 
    $('.btcowned').keyup(updateNumbers); 
    $('.feebox').keyup(updateNumbers); 
}); 
function updateNumbers(e) { 
// Preparation 
var $calc = $(this).closest('.calculator'), 
    $results = $calc.find('table'), 
    chosen = parseFloat($calc.find('.btcowned').val()), 
    fee = parseFloat($calc.find('.feebox').val()), 
    vatPercent = 25, 
// Calculation 
    vatRate = vatPercent * 0.01 + 1, 
    val = chosen - ((chosen * fee)/100), 
    vatVal = val * vatRate; 
// Representation 
$results.find('.totalnetworth .novat').html(isNaN(val) ? '-' : Number(val).toFixed(2)); 
$results.find('.totalnetworth .wvat').html(isNaN(vatVal) ? '-' : Number(vatVal).toFixed(2)); 
} 
});//]]> 
</script> 
<div class="calculator"> 
    <label for="btcowned-1">btcowned 
     <input id="btcowned-1" class="btcowned" value="" /> 
    </label> 
    <label for="btcowned-1">Fee 
     <input id="feebox-1" class="feebox" value="4.5" /> 
    </label> 
    <table> 
     <tr> 
      <th>Title</th> 
      <th>Cost</th> 
      <th>Cost+VAT</th> 
     </tr> 
     <tr class="totalnetworth"> 
      <td>Transfer</td> 
      <td class="novat value"></td> 
      <td class="wvat value"></td> 
     </tr> 
    </table> 
</div> 

그리고 몇 가지 의견 :

1. 스크립트에 대한 ID 년대를 사용하지 마십시오;
2. area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr과 같은 void 태그를 닫으십시오.
3. 사용자 입력이 올바른 데이터 형식을 제공하도록 신뢰하지 않아 스크립트가 쉽게 손상 될 수 있습니다.
4. 스크립트의 표현 부분과 준비 부분과 계산 부분을 항상 분리하여 깨끗하게 만들고 버그를 쉽게 잡을 수 있습니다.