JSNube here – I need some help please please please

[JSNube]

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

https://codepen.io/anon/pen/XEwGWb

[Pogany]

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

[JSNube]

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

[Shikkediel]

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.

[JSNube]

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…

[Shikkediel]

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

[JSNube]

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

[Shikkediel]

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

[JSNube]

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

[Shikkediel]

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

[JSNube]

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

[Pogany]

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

[JSNube]

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.

[Shikkediel]

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

[JSNube]

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

[Author]

Posts