CODEWITHSUNDEEP
javascripthtmlstringadditioninnerhtml
William Garrison
William Garrison

Reputation: 21

Add together numbers in separate DIVs

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

  1. Fetch the contents (a number) of the DIV ID.
  2. Add those numbers together
  3. 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.

Upvotes: 2

Views: 325

Answers (6)

Chris HG
Chris HG

Reputation: 1492

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

Upvotes: 0

Shim-Sao
Shim-Sao

Reputation: 2126

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>

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

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.

Upvotes: 2

Ziad Alame
Ziad Alame

Reputation: 772

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

Upvotes: 0

nsevens
nsevens

Reputation: 2835

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.

Upvotes: 0

CAllen
CAllen

Reputation: 836

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)

Upvotes: 0

Related Questions