Cannot get a js function working in html
I have the following webpage. I want the button "Bereken" to execute the calculate function and display the result on the last row of the last table, but I cannot get it working:
<script type="text/javascript">
$(document).ready(function() {
calculate();
$("input.calculator").blur(function() {
calculate();
});
$("a.calculate").click(function() {
calculate();
return false;
});
});
function calculate() {
$(".calculator").each(function() {
$(this).val(parseFloat($(this).val().replace(',',' .')));
if (isNaN($(this).val())) {
$(this).val('0');
}
});
var _stWidth = parseFloat($("#stoneWidth").val());
var _stLength = parseFloat($("#stoneLength").val());
var _vgWidth = parseFloat($("#vgWidth").val());
var _vgDepth = parseFloat($("#vgDepth").val());
var _surface = parseFloat($("#surface").val());
var _result = (((100/(_stWidth+_vgWidth))+(100/(_stLength+_vgWidth)))*((100*_vgWidth*_vgDepth)*1. 35)/1000)*1.1;
$("#result").text(number_format(_result, 2, ',', '.'));
var _resultTotal = _result*_surface;
$("#resultTotal").text(number_format(_resultTota l, 2, ',', '.'));
}
function number_format( number, decimals, dec_point, thousands_sep ) {
var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
var d = dec_point == undefined ? "." : dec_point;
var t = thousands_sep == undefined ? "," : thousands_sep, s = n < 0 ? "-" : "";
var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}
</script>
<h1>Bereken uw verbruik</h1>
<p>Als u wilt weten hoeveel voegvuller u nodig heeft voor uw bestratingsplan, dan kunt u de onderstaande gegevens invullen en daarna op de knop Bereken drukken. Vervolgens leest u onderaan de uitkomst van de berekening.</p>
<p>(Prakrijgegevens hebben uitgewezen dat het gemiddelde verbruik op 0,91 kg per m2 ligt. Onze berekening is hierop gebaseerd. In specifieke gevallen is het mogelijk dat het verbruik afwijkt).</p>
<p> </p>
<table class="result" style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="height: 30px; width: 180px;" nowrap="nowrap"><strong>Breedte van de steen</strong></td>
<td width="60"><input id="stoneWidth" class="input-text calculator" style="width: 40px;" type="text" value="0" /></td>
<td width="60">cm</td>
<td>Vul hier de breedte van de steen in</td>
</tr>
<tr>
<td nowrap="nowrap" width="120" height="30"><strong>Lengte van de steen</strong></td>
<td width="60"><input id="stoneLength" class="input-text calculator" style="width: 40px;" type="text" value="0" /></td>
<td width="60">cm</td>
<td>Vul hier de lengte van de steen in</td>
</tr>
<tr>
<td nowrap="nowrap" width="120" height="30"><strong>Breedte van de voeg</strong></td>
<td width="60"><input id="vgWidth" class="input-text calculator" style="width: 40px;" type="text" value="0.0" /></td>
<td width="60">cm</td>
<td>Vul hier de breedte van de voeg in</td>
</tr>
<tr>
<td nowrap="nowrap" width="120" height="30"><strong>Diepte van de voeg</strong></td>
<td width="60"><input id="vgDepth" class="input-text calculator" style="width: 40px;" type="text" value="3" /></td>
<td width="60">cm</td>
<td>Een voeg moet minimaal 3cm diep zijn!</td>
</tr>
<tr>
<td nowrap="nowrap" width="120" height="30"><strong>Te bestraten oppervlakte</strong></td>
<td width="60"><input id="surface" class="input-text calculator" style="width: 40px;" type="text" value="0" /></td>
<td width="60">m2</td>
<td>Vul hier de oppervlakte van de bestrating in</td>
</tr>
<tr>
<td> </td>
<td class="art-button" style="height: 40px;" colspan="2"><a class="calculate" href="#">Bereken</a></td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="padding-right: 35px; height: 20px;" valign="middle" nowrap="nowrap"><strong>Voor de bestrating van uw plan heeft u nodig:</strong></td>
<td style="padding-right: 69px; text-align: right; background-color: #000000;" valign="middle"><span style="color: #fac400;"><strong><strong style="color: #000000; white-space: nowrap;"><span id="resultTotal" style="color: #ffcd1a;">0,00 kg</span></strong></strong></span></td>
</tr>
</tbody>
</table>
|