I have a pretty strange problem. I have two fields where I can enter values, and then I want to show calculated values in two seperate labels (different calculations).
However, only one of the values is being shown right now.
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>
The totalnetworth works great and show the calculated value. The totalnetworthVat shows nothing. I also tried even simpler things than writing vatVal, like $('#totalnetworthVat').text('foo').
However nothing shows, and FireBug shows no JS errors.
My alert() shows that vatVal is a real number.
Any ideas?
I think the problem is the self-closing tag:
<label id="totalnetworth" style="font-weight: bold;" />
If you change it to:
<label id="totalnetworth" style="font-weight: bold;"></label>
...it then seems to work: http://jsfiddle.net/GRFda/
My understanding is that self-closing tags like you had won't work unless the doc type is xhtml, and even then it probably won't work if the page isn't served with a MIME type of text/xml
or application/xhtml+xml
.
I have made quite a bunch of calculators, that is why I gave it a little bit more work.
Look at my solution in 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>
And some comments regarding your code:
area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr
;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.