Add together numbers in separate DIVs

Question

(obligatory I'm new to this) What I am trying to do is...

Fetch the contents (a number) of the DIV ID.
Add those numbers together
Print them in the "at" DIV.

I know it should be pretty darn simple. But I cant wrap my head around why it isn't working. I want to learn WHY it's not working. I dont necessarily want you guys to write it for me. I want to learn. Here is my code...

var at = document.getElementById("a-total");
var ac = document.getElementById("a-coffee").innerHTML;
var ah = document.getElementById("a-hobby").innerHTML;
var af = document.getElementById("a-fundme").innerHTML;

var addopt = ac + ah + af;

function aTotal (){
    if (addopt >= 0){
        at.innerHTML = addopt;
    } else {
        console.log("tis broken");
    }
}

aTotal();

It outputs properly, but it's just not adding the numbers in the DIVs together. It's placing them side by side rather than adding them together.

The values retrieved from the divs are of type string. You have to convert them to number. — zer0, Dec 17 '18 at 15:50
Your `ac` and so on are going to be strings, you need to convert them to numbers before adding — Robin Zigmond, Dec 17 '18 at 15:50
innerHTML returns as string. Convert to float/integer and it should work. This can be done by using parseFloat or parseInt. Goodluck! — Peter Bode, Dec 17 '18 at 15:51
Do not forget to check if the value is undefined, it avoids having surprises. If the first character cannot be converted to a number, parseInt returns NaN — Shim-Sao, Dec 17 '18 at 16:11

cнŝdk · Answer 1 · 2018-12-17T16:00:30.933

2

That's because you are only doing a string concatenation.

You need to transform the values to numbers as .innerHTML() returns a string. This is how should your operation:

var addopt = +ac + +ah + +af;

Note:

It's better to use .innetrText() or .textContent() over .innerHTML to avoid getting HTML markups inside your elements if there are any into the result.

edited Dec 17 '18 at 16:00

answered Dec 17 '18 at 15:50

cнŝdk

31,391
7
56
78

This working perfectly. Is it a part of Parsing? Is the + thats attached to +ac representing or converting it to something? Sorry, I just want to learn. It works perfectly. Just want to know why. Thank you so much. – William Garrison Dec 17 '18 at 15:53
@WilliamGarrison The unary `+ operator is a shortcut to convert a string into a number in JavaScript, please check [What is unary + used for in Javascript?](https://stackoverflow.com/questions/9081880/what-is-unary-used-for-in-javascript) for further details. – cнŝdk Dec 17 '18 at 15:55

Chris HG · Answer 2 · 2018-12-17T16:38:04.603

0

The contents of your divs are strings, even though the represent numbers. So if your divs have the values '1', '2' and '3' adding them togther gives you '123' rather than 6 as you might expect. Have a look at the parseInt function to see how you can turn your strings into numbers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

edited Dec 17 '18 at 16:38

answered Dec 17 '18 at 15:50

Chris HG

1,412
16
20

1

Please avoid including wschool references, it's better to use `MDN` as official docs. – cнŝdk Dec 17 '18 at 16:03

score 0 · Answer 3 · answered Dec 17 '18 at 15:50

0

This happens a lot. What you need to do is convert to integer because it reads it as a string using ParseInt (variable) or ParsefLoat (variable) ParsefLoat (variable) can also use .toFixed (decimal_places)

answered Dec 17 '18 at 15:50

CAllen

856
5
14

score 0 · Answer 4 · answered Dec 17 '18 at 15:51

0

You have to parse the content of the divs to a number, as the innerHTML returns a string.

So either var addopt = +ac + +ah + +af; or var addopt = parseInt(ac) + parseInt(ah) + parseInt(af); should work for you.

answered Dec 17 '18 at 15:51

Nsevens

2,588
1
17
34

score 0 · Answer 5 · answered Dec 17 '18 at 15:51

0

You need to parse the innerHTML to integers or floats to be able to do mathematical operations on them. Check the below code that takes the text and parses it to ints:

var addopt = parseInt(ac) + parseInt(ah) + parseInt(af);

answered Dec 17 '18 at 15:51

Ziad Alame

772
6
16

score 0 · Answer 6 · answered Dec 17 '18 at 16:01

You try to additionnal strings instead of numbers.

innerHTML return the string in a HTML element.

You should parseInt or parseFloat the content to have numbers.

<script>
var at = document.getElementById("a-total");
var ac = document.getElementById("a-coffee").innerHTML;
var ah = document.getElementById("a-hobby").innerHTML;
var af = document.getElementById("a-fundme").innerHTML;

// Values are taken as string and mus be converted to int.
// We check also that a value is not undefined.
ac = isNaN(parseInt(ac)) ? 0 : parseInt(ac);
ah = isNaN(parseInt(ah)) ? 0 : parseInt(ah);
af = isNaN(parseInt(af)) ? 0 : parseInt(af);

var addopt = ac + ah + af;

function aTotal (){
    if (addopt >= 0){
        at.innerHTML = addopt;
    } else {
        console.log("tis broken");
    }
}

aTotal();
</script>

Add together numbers in separate DIVs

6 Answers6