Dynamic sum of elements inside a loop

Question

I have a problem with my wp site... I have a post-type called "sezione". For each new post I create, a row is automatically added in a specific page. Each row has three input fields: in the first one I have to write number of males, in the second the number of females, while the third one is a readonly field with an automatic sum. I'm using a while loop like this:

 'sezione',
        'orderby' => 'meta_value_num',
        'meta_key' => 'n-sez',
        'order' => 'ASC'
    ) );   

    if( have_posts() ) : while( have_posts() ) : the_post();
?>

    
    ID, 'n-sez', true);
    ?>

    
    Sezione

The loop works correctly. What I'm trying to do is to make the third field in each row display the sum of the values of the other two. I'm using this function:

function recalculateSummf()
{
    var num1 = parseInt(document.getElementById("uomini").value);
    var num2 = parseInt(document.getElementById("donne").value);
    document.getElementById("totmf").value = num1 + num2;

}

But it works just in the first row. How can make this script works in all rows? May anybody help me in solving this issue? Thanks a lot!

Just a student · Accepted Answer

Problem

Main issue: you should give an ID only once to any element on any page, ever.

If I understand you correctly, your HTML will look something like this.

Sezione X

Now, all of those have ID uomini, donne and totmf. Using getElementById to find them will always return the first ones.

Solution 1: different IDs

Easy fix: add $nsez to the IDs and use that. You will have to add $nsez as an argument to your call of recalculateSummf in the onblur if you want to do this.

function recalculateSummf(sezione) {
  var m = parseInt(document.getElementById('uomini' + sezione).value),
      f = parseInt(document.getElementById('donne' + sezione).value);
  document.getElementById('totmf' + sezione).value = m + f;
}

for (let sezione of ['X', 'Y', 'Z']) {
  recalculateSummf(sezione);
}

Sezione X
  
    
    
    
  

Sezione Y
  
    
    
    
  

Sezione Z

Solution 2: update everything all the time

Alternative, that will update all sums on the page, is the following.

Loop over all .row-100perc-bord containers and fix within that container.

function recalculateSummf() {
  var containers = document.querySelectorAll('.row-100perc-bord');
  for (let container of containers) {
    let m = parseInt(container.querySelector('.field-50-u').value),
        f = parseInt(container.querySelector('.field-50-d').value);
    container.querySelector('.field-50-mf').value = m + f;
  }
}
  
recalculateSummf();

Sezione X
  
    
    
    
  

Sezione Y
  
    
    
    
  

Sezione Z

Solution 3: pass context

If you add a this argument to your recalculateSummf() calls, you receive a reference to the input element that was blurred in your function. You can use this to update only the inputs that were changed.

function recalculateSummf(input) {
  var container = input.parentNode,
      m = parseInt(container.querySelector('.field-50-u').value),
      f = parseInt(container.querySelector('.field-50-d').value);
  container.querySelector('.field-50-mf').value = m + f;
}
  
var inputs = document.querySelectorAll('.field-50-u');
for (let input of inputs) {
  recalculateSummf(input);
}

Sezione X
  
    
    
    
  

Sezione Y
  
    
    
    
  

Sezione Z

Solution 4: derive context

When you attach your event handlers programmatically, your function will receive an event argument by default, that carries the target of the event, the input element that was blurred, with it. You can use this if you want, so you don't need to add an onblur in your HTML at all.

function recalculateSummf(event) {
  var input = event.target,
      container = input.parentNode;
  update(container);
}

function update(container) {
  var m = parseInt(container.querySelector('.field-50-u').value),
      f = parseInt(container.querySelector('.field-50-d').value);
  container.querySelector('.field-50-mf').value = m + f;
}

// attach event handlers
var inputs = document.querySelectorAll('.field-50-u, .field-50-d');
for (let input of inputs) {
  input.addEventListener('blur', recalculateSummf);
}

// update values initially
var containers = document.querySelectorAll('.row-100perc-bord');
for (let container of containers) {
  update(container);
}

Sezione X
  
    
    
    
  

Sezione Y
  
    
    
    
  

Sezione Z