How do I push into an array using an event listener?

[Atman Atos]

If the check box is clicked, a value is to be added to the array. The array already has a loop that sums the total of its value(s). Pushing the value when the event listener is fired is the problem. I have made numerous attempts. The concept is that the checkbox should either add a value of 20 to the array or subtract a value of 20 from the array based on the event listener. I understand that the approach I have taken may have some fundamental flaws since the checkbox is unchecked by default which means the array will remain with a value of minus 20 except it is checked. What works?

let arrayItems = [5, 10, 15]
let total = 0;

for (i = 0; i < arrayItems.length; i++ ) {
    total += arrayItems[i];
}
console.log(total);

let checkbox = document.querySelector(".jsss");
checkbox.addEventListener('change', function() {
  if (this.checked) {
    arrayItems.push(20)
  } else {
    total -= 20
  }
});

<label  for=""><input class="jsss" type="checkbox">Input 1 of many</label>

 

[BigDady]

After the push in the listener you need to add 20 to the total.
And I think you're placing the listener on the wrong element - hard to say without seeing more html.
How do you know the user is finished if he doesn't check the box? You will never subtract 20 with the setup as it is now.

If the checkbox is part of other things the user must do then have a submit button and place listener on that. If not Subtract 20 from total in the array summing loop and remove the else section of the listener function.

 

[MeMate]

total is setted once only. So each time you check/uncheck your element, total value reduces by 20. There is no function to splice the array if unchecked. I have no idea what you're going to do there.

So, because i don't know what exactly you need here, maybe that's what you want:

let arrayItems = [5, 10, 15]
let total = 0;

//Don't crap with -= subtractions additions and so on. Create a function for it according to your array arrayItems
function totalSet(){
total = 0;
for (i = 0; i < arrayItems.length; i++ ) {
    total += arrayItems[i];
}
}


let checkbox = document.querySelector(".jsss");
checkbox.addEventListener('change', function() {
  if (this.checked) {
    arrayItems.push(20)
  } else {
      arrayItems.splice((arrayItems.length-1),1) //remove the last array element
  }
  totalSet();
 
});
totalSet();

EDIT: I made you a jsfiddle. I guess that's what you're looking for.
Merry Xmas
https://jsfiddle.net/n76eqbuz/1/

 

[Atman Atos]

The Js code above doesn't work, I'm not sure it was intended to, it returns TypeError: checkbox is null. The jsfiddle works and needs more studying on my part, thanks.
Merry Xmas

 

[Atman Atos]

After the push in the listener you need to add 20 to the total.
And I think you're placing the listener on the wrong element - hard to say without seeing more html.
How do you know the user is finished if he doesn't check the box? You will never subtract 20 with the setup as it is now.

If the checkbox is part of other things the user must do then have a submit button and place listener on that. If not Subtract 20 from total in the array summing loop and remove the else section of the listener function.

The user shouldn't submit, and the total should update depending on the change to the box, the jsfiddle done by MeMate is exactly what I tried to replicate. I tried your method as much as possible but did not get the right output. This is what my HTML looked like. My initial attempt was to display it in the console

<section>
    <label  for=""><input class="jsss" type="checkbox">50 Bucks of many</label><br />
    <label  for=""><input class="jsss" type="checkbox">20 Bucks of many</label><br />
    <label  for=""><input class="jsss" type="checkbox">10 Bucks of many</label><br />
    <label  for=""><input class="jsss" type="checkbox">5 Bucks of many</label><br /><br />
<div id="total">

</div>
</section>

 

[MeMate]

function totalSet(){
total = 0;
for (i = 0; i < arrayItems.length; i++ ) {
    total += parseFloat(arrayItems[i]);
}
if(total>0){
document.getElementById('SUM').style.display='block'; //<- show the div because total is not null
document.getElementById('SUM').innerHTML="You owe me "+total+" Bucks"
}else{
document.getElementById('SUM').style.display='none';  //<- hide the div because total is null
}
}