Javascript Adding

Question

Ok so I have columns I want added together if there is any information in them. So say I have

• Accounts

  • 1
  • 2
  • 3
  • .

There are 4 account spaces but only 3 accounts. How do I create java script to add this up.

• Vivin Paliath: What have you done so far? Do you have any examples of your code?

Answer 1

Live Example

HTML:

<ul>
 <li id="accounts">
 <p> Accounts </p>
 <ul>
 <li> 1 </li>
 <li> 2 </li>
 <li> 3 </li>
 <li> . </li>
 </ul>
 </li>
</ul>

JavaScript:

// Get accounts, ul and set sum to 0
var acc = document.getElementById("accounts"),
 ul = acc.getElementsByTagName("ul")[0],
 sum = 0;
// Filter out text nodes. Returning an array of <LI> elements
var lis = Array.prototype.filter.call(ul.childNodes, function(li) {
 if (li.tagName === "LI") {
 return true;
 }
});
// Loop through LIs adding up the sum
for (var i = 0, ii = lis.length; i < ii; i++) {
 // If it's the last LI element then set the textContent.
 if (i === ii - 1) {
 lis[i].textContent = sum;
 } else {
 sum += +lis[i].textContent;
 }
}

Disclaimer: Requires Modern Browser or Modernizr.

• David Thomas: That's so much tidier than my own implementation...and with 50% fewer loops..! +1 =D
• Raynos: @DavidThomas Where was your implementation?
• David Thomas: I am ashamed of it, but it's over on JS Fiddle. It's much the same idea as your own implementation, which is why I've not posted it. It's just far less pretty and concise... =/
• David Thomas: Ah...actually, now you mention it, I kinda glossed straight over the bit with filter in it...ah, well. You still deserve the +1, and I can't honestly bring myself to believe my version is sufficiently different to justify posting as a separate, and new, answer.

Answer 2

If your real markup is a list like that, you could do something like this:

// using jquery syntax for brevity; consider it pseudocode
var jList = $('#accounts');
function addColumns() {
 var iSum = 0;
 jList.find('li').each(function() {
 var jLI = $(this);
 if(parseFloat(jLI.text()) != 'NaN')
 iSum += parseFloat(jLI.text());
 });
 return iSum;
}

This isn't super-great code. If you give us a little more info about what you're working with, something a little more robust should suggest itself. But the basic idea is that you check a set of elements-of-interest to see if they have summable content (i.e. if their text content can be interpreted as a number); then you add the summable items together.

The requirements of an algorithm like that will impose constraints on the way your "columns" can be marked-up. But there's a near-infinite set of possibilities.

• Tom: The "$" function, as well as the .find, .each, and .text methods are all provided by jQuery. And as I said in my answer, I was using jQuery-dependent syntax for brevity. Even if Michael isn't using jQuery, it's enough like pseudocode that he will probably be able to follow what I'm doing. I also explained the code in text. Doesn't seem like a downvote is really appropriate.
• Raynos: that might be so. I just don't like the assumption that jQuery is always an option. Also when people tend to ask for JavaScript questions they also want to see the real DOM manipulation. Converting your code into actual DOM manipulation code is a different challenge.
• Tom: Disagree. Pseudocode is sufficient when the problem is algorithm design. jQuery (or any other framework) works especially well as pseudocode because it is well-defined and heavy on the syntactic sugar. Unless Michael's question was fundamentally about the DOM operations, I stand by my answer's instructive relevance. /rant
• Michael Downey: Thank you its Pseudocode so enough to help me troubleshoot the question. I am using a Adobe X so the only use of the list is for naming purposes.