Ask Experts Questions for FREE Help !
Ask
    YakNarak's Avatar
    YakNarak Posts: 1, Reputation: 1
    New Member
     
    #1

    Jun 16, 2014, 10:39 PM
    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>

Check out some similar questions!

The function keys are not working gateway laptop? [ 5 Answers ]

I bought my boyfriend a gateway laptop.. Whenever he presses the function keys on the game, instead of being a normal "f1, f2...etc" keys, it always does its system functions like contrast, brightness.. How do we get the keyboard to just be a regular FN key?

Windows 7 search function not working [ 1 Answers ]

Search function on the PC doesn't work when I am logged on as administrator. Works when I'm logged on as another user. Help anyone please.

New Tab function stopped working [ 9 Answers ]

I don't know what caused it, but this morning my "New Tab" button is no longer working. I restarted Firefox, re-booted the computer and still it does not work. When I click on the "New Tab" icon, a new tab does not open. I'm using 3.6.16 on this computer.

Add/remove function not working properly [ 3 Answers ]

I wanted to remove an application from Windows XP Professional. When I opened the Add/Remove option in Control Panel it listed all the installed programmes but didn't give me the choice of uninstalling the application I wanted to remove. It only showed me the size of the applications and the...


View more questions Search
 

Question Tools Search this Question
Search this Question:

Advanced Search

Add your answer here.