JavaScript: Adding up the values of the span elements using a for loop

Question

JavaScript: Adding up the values of the span elements using a for loop

Enclosed within span tags, the following values are present:

<div id="aantallen">
 <span>3</span>
 <span>2</span>
</div>

To find the sum of these values in JavaScript, a For Loop was created:

var div = document.getElementById("aantallen");
var spans = div.getElementsByTagName("span");
for(i=0;i<spans.length;i++)
{
    var totalPersons = totalPersons + i;
    alert(totalPersons);
}

Since 3 and 2 are considered as text, the alerts display NaN. The question posed is: How can one convert 3 and 2 into strings in order to effectively calculate their sum?

A solution attempted involved using String(i), but it failed to yield the desired outcome.

javascript string for-loop sum type-conversion

Answer 1

Answer №1

To get the sum of numbers in a given DOM element, you first need to convert the content to a Number. After that, you can utilize the reduce method for the calculation.

const values = document.querySelectorAll('#numbers span');

const total = Array.from(values).reduce((sum, valueEl) => sum + Number(valueEl.textContent), 0)

console.log(total);

<div id="numbers">
  <span>4</span>
  <span>9</span>
  <span>1</span>
</div>

Answer 2

To get the sum of numbers in a given DOM element, you first need to convert the content to a Number. After that, you can utilize the reduce method for the calculation.

const values = document.querySelectorAll('#numbers span');

const total = Array.from(values).reduce((sum, valueEl) => sum + Number(valueEl.textContent), 0)

console.log(total);

<div id="numbers">
  <span>4</span>
  <span>9</span>
  <span>1</span>
</div>

Answer 3

Answer №2

If you need to convert a string into an integer in JavaScript, you can do so by using the following function:

parseInt(totaalPersonen);

Answer 4

If you need to convert a string into an integer in JavaScript, you can do so by using the following function:

parseInt(totaalPersonen);

Answer 5

Answer №3

It seems like you are resetting the variable totaalPersonen in each iteration of the loop. To prevent this, make sure to initialize it outside the loop with var totaalPersonen = 0;, then increment its value inside the loop by either using

totaalPersonen = totaalPersonen + 1;

or simply totaalPerseonen++;

Answer 6

It seems like you are resetting the variable totaalPersonen in each iteration of the loop. To prevent this, make sure to initialize it outside the loop with var totaalPersonen = 0;, then increment its value inside the loop by either using

totaalPersonen = totaalPersonen + 1;

or simply totaalPerseonen++;

Answer 7

Answer №4

Give this a try: In order to add the text inside the spans, utilize the innerHTML method instead of i. Additionally, make sure to declare the totaalPersonen variable outside the for loop to prevent it from being reinitialized each time.

var div = document.getElementById("aantallen");
var spans = div.getElementsByTagName("span");
console.log(spans);
var totaalPersonen = 0;
for(i=0;i<spans.length;i++)
{
    alert(parseInt(spans[i].innerHTML));
    totaalPersonen = parseInt(totaalPersonen) + parseInt(spans[i].innerHTML);
    //alert(totaalPersonen);
}
alert(totaalPersonen);

Answer 8

Give this a try: In order to add the text inside the spans, utilize the innerHTML method instead of i. Additionally, make sure to declare the totaalPersonen variable outside the for loop to prevent it from being reinitialized each time.

var div = document.getElementById("aantallen");
var spans = div.getElementsByTagName("span");
console.log(spans);
var totaalPersonen = 0;
for(i=0;i<spans.length;i++)
{
    alert(parseInt(spans[i].innerHTML));
    totaalPersonen = parseInt(totaalPersonen) + parseInt(spans[i].innerHTML);
    //alert(totaalPersonen);
}
alert(totaalPersonen);

JavaScript: Adding up the values of the span elements using a for loop

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

Is it possible to generate an HTML element by utilizing an array of coordinates?

How can I prevent clicks on child links using the :not() selector?

How can we eliminate the need for specifying the order of generic arguments in TypeScript?

Minimalistic command-line calculator in JavaScript (utilizing only native functions for concise code)

Different from Local system, the code refuses to work when deployed on the server

Eliminate all ul elements inside li elements except for the current li

Fix surface orientations on potentially corrupted .stl files

What is the best way to execute a row-wise matrix operation without needing a loop (by "purrr-ifying"

exclude properties with different values in an array

Is it possible to use Material-UI Link along with react-router-dom Link?

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

Save property using the useState hook

ES6 syntax specification allows for the use of a fat arrow function for declaring React components

Include a photo in the notification when utilizing the sendToTopic function

Angular Directive - Embedding Complex Objects in Attribute

Organizing strings in alphabetical order

The button is effectively disabled for a few seconds as needed, but unfortunately, the form cannot be submitted again using that button

Ways to guarantee the protection of APIs that are accessible to both front-end applications and other servers

AngularJS encountered an error while attempting to load a template: [$compile:tpload]