Ask Me Help Desk

Ask Me Help Desk (https://www.askmehelpdesk.com/forum.php)
-   Javascript (https://www.askmehelpdesk.com/forumdisplay.php?f=452)
-   -   Cannot get a js function working in html (https://www.askmehelpdesk.com/showthread.php?t=794527)

  • Jun 16, 2014, 10:39 PM
    YakNarak
    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>&nbsp;</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>&nbsp;</td>
    <td class="art-button" style="height: 40px;" colspan="2"><a class="calculate" href="#">Bereken</a></td>
    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</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&nbsp;kg</span></strong></strong></span></td>
    </tr>
    </tbody>
    </table>

  • All times are GMT -7. The time now is 08:30 AM.