We help IT Professionals succeed at work.

Sum of several values

Ahmad Jaber
Ahmad Jaber used Ask the Experts™
on
Good evening everyone !
I try to have the total sum of several value in js but I can't.
function Gift(a){
var CHK_Gift = document.getElementById("CHK_Gift_" + a); //value 1000 + value 700 + value 500
var VAL_Gift = document.getElementById("VAL_Gift_" + a); //value 0
var PNT_Gift = document.getElementById("PNT_Gift");      //value 0

if(CHK_Gift.checked == true) {
	var POINT = CHK_Gift.value;
	VAL_Gift.value = CHK_Gift.value;
} else {
	var POINT = 0;
	VAL_Gift.value = 0;
}

PNT_Gift.value = parseInt(POINT);
}

Open in new window

I don't already know if I'm doing it right, but that's the problem,
As you can see, I have several CHK_Gift and VAL_Gift values that I am trying to have a running total.
Only, but condition does not allow me.

When I click on:
CHK_Gift_0, its value is carried over to VAL_Gift_0 = 1000
CHK_Gift_1, its value is carried over to VAL_Gift_1 = 700
CHK_Gift_2, its value is carried over to VAL_Gift_2 = 500
and wishes, in PNT_Gift to have the total sum, that is 2200

Can you help me please ?
Thank you in advance and happy holidays!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
it's safest tp to compute all checkbox every time, not only trying to start from previous checked or not
test page : https://jsfiddle.net/835e06hy/

happy holidays to you

<input id="CHK_Gift_0" type="checkbox" value="1000"/>1000<br>
<input id="CHK_Gift_1" type="checkbox" value="700"/>700<br>
<input id="CHK_Gift_2" type="checkbox" value="500"/>500<br>
GIFT : <input id="PNT_Gift" type="text" value="0">

Open in new window


window.addEventListener("DOMContentLoaded", function(event) {
  for(var i=0;i<3;i++) {
  	document.getElementById("CHK_Gift_"+i).addEventListener("change", Gift);
  }  
});

function Gift() {
  var total = 0;
  for(var i=0;i<3;i++) {
  	if(document.getElementById("CHK_Gift_"+i).checked) {
    	total += document.getElementById("CHK_Gift_"+i).value * 1;
    }
    document.getElementById("PNT_Gift").value = total;
  }  
}

Open in new window

Author

Commented:
Thank leakim971,

Thanks again for your quick response.

In your example and your test page, I don't get errors, while in mine I have these two errors ...
Sans-titre.png
leakim971Multitechnician
Top Expert 2014

Commented:
not matching IDs ?

Author

Commented:
Hello Leakim,

I understood the origin of the problem.
It is the limit of i <3 that poses the problem.
I can't delete i <3, so what if my boxes are greater or less than say 5 or 7 or 10?

<?php
try {$stat = $pdo_jeux->query("SELECT * FROM tb_jeu_recap");
$i = 0; while($data = $stat->fetch(PDO::FETCH_ASSOC)){
?>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="CHK_Gift_<?php echo $i; ?>" value="<?php echo $data["Points"]; ?>">
  <label class="custom-control-label" for="CHK_Gift_<?php echo $i; ?>"><?php echo $COUPON; ?></label>
</div>

<?php $i++; }}catch(PDOException $e){echo "<div class='alert alert-danger'>".$e->getMessage()."</div>";} ?>

  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1"><i class="fa fa-gift"></i></span>
  </div>
  <input type="text" id="PNT_Gift" class="form-control" readonly value="0">


window.addEventListener("DOMContentLoaded", function(event) {
  for(var i=0; i<3; i++) {
  	document.getElementById("CHK_Gift_" + i).addEventListener("change", Gift);
  }  
});

function Gift() {
  var total = 0;
  for(var i=0; i<3; i++) {
  	if(document.getElementById("CHK_Gift_" + i).checked) {
    	total += document.getElementById("CHK_Gift_" + i).value * 1;
    }
    document.getElementById("PNT_Gift").value = total;
  }  
}

Open in new window

Author

Commented:
For now I have done this and it works, but I don't know if it's the correct formula ...

for(var i=0; i<"<?php echo $i;?>"; i++) {
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
An alternative approach is to give each of your checkboxes a class, and then use that to select them all:

<input type="checkbox" class="gifts custom-control-input" id="CHK_Gift_<?php echo $i; ?>" value="<?php echo $data["Points"]; ?>">

Open in new window

function Gift() {
    let gifts = document.getElementsByClassName("gifts");
    let total = 0;

    for( let i = 0; i < gifts.length; i++ ) {
        total += gifts[i].checked ? +gifts[i].value : 0;
    }

    document.getElementById("PNT_Gift").value = total;
}

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
replace :
for(var i=0;i<3;i++) {
by :
for(var i=0;i<max;i++) {

and somewhere :
<?php
   echo 'var max = ' . $i . ';';  // where $i have the number of checkboxes
?>

Open in new window

Author

Commented:
Thank you for your precious help!
leakim971Multitechnician
Top Expert 2014

Commented:
you welcome