Skip to main content

Forums

This topic contains 14 replies, has 3 voices, and was last updated by  JSNube 11 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #269782

    JSNube
    Participant

    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

    #269789

    Pogany
    Participant

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

    #269790

    JSNube
    Participant

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

    #269797

    Shikkediel
    Participant

    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.

    #269799

    JSNube
    Participant

    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…

    #269802

    Shikkediel
    Participant
    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

    #269804

    JSNube
    Participant

    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 :-)

    #269810

    Shikkediel
    Participant

    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

    #269811

    JSNube
    Participant

    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 :-)

    #269812

    Shikkediel
    Participant

    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).

    #269814

    JSNube
    Participant

    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. :-)

    #269815

    Pogany
    Participant

    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));

    #269817

    JSNube
    Participant

    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.

    #269832

    Shikkediel
    Participant

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

    #269833

    JSNube
    Participant

    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-link icon-logo-star icon-search icon-star