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


Joined
Sep 12, 2022
Messages
30
Reaction score
0
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?

JavaScript:
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
  }
});

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

Advertisements

Joined
Nov 13, 2020
Messages
231
Reaction score
29
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.
 
Joined
Mar 11, 2022
Messages
225
Reaction score
29
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:
Code:
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/
 
Last edited:
Joined
Sep 12, 2022
Messages
30
Reaction score
0
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
 
Joined
Sep 12, 2022
Messages
30
Reaction score
0
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

HTML:
<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>
 
Ad

Advertisements

Joined
Mar 11, 2022
Messages
225
Reaction score
29
Code:
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
}
}
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top