Need to convert result of .innerHTML to number on javascript

Question

I have a html that contains tables like the following example

<td class="topiccell">
    <span class="topicnormal">
        <a class="value" href="/topic/?lang=en&action=viewtopic&topic=http%3A%2F%2Fwww.wandora.org%2Fsparql%2Fresultset%2Fliteral%2F40">
                 40
        </a>
    </span>
</td>
<td class="topiccell">
   <span class="topicnormal">
       <a class="value" href="/topic/?lang=en&action=viewtopic&topic=http%3A%2F%2Fwww.wandora.org%2Fsparql%2Fresultset%2Fliteral%2F40">
                 3
        </a>
   </span>
</td>

and I need to parse 40, 3 and another 75 numbers using .innerHTML. Then I would like to make a sum of all 75 numbers. I used the following

var valuelements = document.getElementsByClassName("value");
var features = new Array(valuelements.length);
for (var i=0; i<=features.length; i++){ 
  var val = valuelements[i].innerHTML;
  var counter = counter + val;
}
document.write(counter);

and the result was like 40 3 etc.... tried parseInt, parseFloat, .value but the result always was NaN. Any suggestions?

you could try: var val = Number(valuelements[i].innerHTML); or var val = parseInt(valuelements[i].innerHTML); and declare your var counter outside the loop — Joseph Caracuel
– Joseph Caracuel, Commented Jan 31, 2013 at 2:00
1*s is your friend. If s is a string representation of a number, 1*s is a number. Also javascript does not have block scope variables, so declare all vars outside the for block. — Paul
– Paul, Commented Jan 31, 2013 at 2:12

the system · Accepted Answer · 2013-01-31 16:13:51Z

13

You need to initialize counter with a starting number, otherwise you're performing math on undefined.

var counter = 0;

And then in the loop, use parseInt, parseFloat, or a direct number conversion on the .innerHTML value.

var counter = 0;

for (var i=0; i<features.length; i++){ 
  counter += parseFloat(valuelements[i].innerHTML);
}

In a modern browser, you could do this:

var count = [].reduce.call(valueelements, function(c, v) {
    return c + parseFloat(v.innerHTML);
}, 0);

edited Jan 31, 2013 at 16:13

answered Jan 31, 2013 at 2:07

the system

9,35642 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2027553 Over a year ago

Thank you all for your answers!Ok, tried all your answers and now is telling me that "Error:valuelements[i] is undefined" . I tried to make new Array(valuelements.length) but keeps telling is undefined... How to fix it?

the system Over a year ago

@user2027553: I didn't notice you had <= in your for loop. It should just be <, as in i<features.length. I'll update.

elclanrs · Accepted Answer · 2013-01-31 02:12:27Z

3

Try something like this, using a more functional approach:

var sum = [].map.call(valuelements, function(v) {
  return +v.textContent; }).reduce(function(a, b) { return a + b; });

answered Jan 31, 2013 at 2:12

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

2 Comments

the system Over a year ago

Just a note... Even though you're pre-mapping the elements to numbers, you should still provide a seed for .reduce just in case there are no valuelements found. With no seed, .reduce will throw an error when called on an empty Array. Ex: [].map(Number).reduce(Number); // TypeError ... [].map(Number).reduce(Number, 0); // 0

elclanrs Over a year ago

Yeah, I guess that would be good practice. I assumed OP has elements.

Collectives™ on Stack Overflow

Need to convert result of .innerHTML to number on javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related