Forums

Give help. Get help.

  • # April 13, 2018 at 10:00 am

    I am stumped with this JavaScript calculating problem . I need to add all the values, but some of them need to be multiplied by another value first. e.g.
    a = num1+num2+num3
    b= num4 x num5 x num6
    c= num7 x 10
    total = a+b+c

    have a look at the code below. I am just confusing myself completely. It’s probably a very nube mistake.
    https://jsfiddle.net/eh1jkfpL/26/#&togetherjs=o6Dycnu1s1

    # April 13, 2018 at 11:44 am

    I think you already answered your question.
    Try first declaring var a,b,c and add them together.

    # April 13, 2018 at 11:54 am

    I tried doing exactly that in separate html. But failed miserably. Do you perhaps have an example for me?

    # April 13, 2018 at 1:49 pm

    How exactly did it fail? It seems to be working.

    Edit – I think I see what you’re aiming at. You’re using string type variables and not numbers… so instead of mathematical addition, it gets added together as text.

    # April 13, 2018 at 2:01 pm

    So the html and css works correctly. The issue is the JavaScript. As you enter amounts in the input fields, it should automatically calculate in the “Total” field, which is the very last field. But I made a mistake in js code somewhere and I can’t figure out where or what I did wrong…

    # April 13, 2018 at 2:06 pm
    function computeCal() {
    
        var bond = Number(document.getElementById('bond').value);
        var funeral = Number(document.getElementById('funeral').value);
        var eduyear = Number(document.getElementById('eduyear').value);
        var eduyearamt = Number(document.getElementById('eduyearamt').value);
        var educhildamt = Number(document.getElementById('educhildamt').value);
        var vefin = Number(document.getElementById('vefin').value);
        var dept = Number(document.getElementById('dept').value);
        var anuin = Number(document.getElementById('anuin').value);
        var total = bond + funeral + eduyear * eduyearamt * educhildamt + vefin + dept + anuin * 10;
    
        document.getElementById('total').value = "Life Cover Needed = ZAR" + total.toFixed(2);
    }
    

    Explained in short:

    var a = ‘he’;
    var b = ‘llo’;

    => a + b = ‘hello’

    var a = ‘1’;
    var b = ‘2’;

    => a + b = ’12’

    var a = 1;
    var b = 2;

    => a + b = 3

    # April 13, 2018 at 2:28 pm

    Oh I see where I went wrong. You are spot on! What nube I was being hey! Lol…thank you so much for having a look at it. As you can see I’m still very new to JavaScript. I think I must just add in a total.toString().replace to move the “,” now I guess. I’ll play around with it…Thanks again :-)

    # April 13, 2018 at 5:47 pm

    No problem, it wasn’t obvious to me either at first. Since you’re doing the same thing several times, you could use another function for that. It’ll save a bunch of characters and be a bit more readable.

    codepen.io/rdEawY

    # April 13, 2018 at 10:10 pm

    Awesome! I’ll use that then. I thought the .toString() method was the only way to set “,” in the right decimal place? Guess I have a long way of learning to go :-)

    # April 13, 2018 at 10:43 pm

    Decimals are tricky in JS if you want to do it to a number. If you can use a string, toFixed (I think what you mean) is an easy way. But you’d have to apply it after the calculation because it turns a number into a string…

    Edit – the values from the elements also become strings when you read them (so they’re turned into numbers first).

    # April 13, 2018 at 11:50 pm

    Alright :-) So I tried this:

    Here’s what I added to fix the decimal/comma placement issue:

    var total = (bond + funeral + eduyear * eduyearamt * educhildamt + vefin + dept + anuin * 10).toFixed(2);

    total = total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);

    So it keeps the .toFixed(2) that you added, and the string, .toString() corrects the “,” placement. :-)

    # April 14, 2018 at 1:20 am

    Did you solve it? If no I’ve made a fork

    The problem is that document.getElementById('bond').value is a string not a number.
    So you end up adding strings.

    I’ve change it to this:

    var bond = parseFloat(document.getElementById('bond').value) || 0;
    This translates as: “give me the value of the number imput as a number but if it’s empty (i.e NaN) give me 0”;

    An other error is using .toFixed(2) since toFixedtransforms the number in a string.
    I’ve change it to this: parseFloat((anuin * 10).toFixed(2));

    # April 14, 2018 at 1:59 am

    Thanks Pogany.

    Shikkediel spotted my mistake, then we hashed it out and fixed all the issues, including the decimal and comma placement.

    So the issue is resolved, thanks anyway.

    # April 14, 2018 at 12:00 pm

    I think I missed what you meant by the comma placement but you seem to have solved it…

    # April 14, 2018 at 12:06 pm

    It’s all good man…yeah I got it sorted. Thanks for all the help 😀

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag