#Two addEventListeners for inputs

5 messages · Page 1 of 1 (latest)

hushed surge
#

Hi, I'm having issues with Events.
I have a simple form with a few checkboxes, and a 'select-all' button at the top.
I want to know, If inputs are checked, or not.

For that, I have one eventListener that checks for 'change' inside inputs. For now it just shows text in console based on the input's status.

I also have second eventListener, for button, that listens for 'clicks'. When button in clicked, then all inputs toggle between 'checked' status.

But after selecting this button, nothing shows up in a console from 'change' event.
How can I make it to listen for changes that occurs after button is clicked too?

Here is an example of logic that I am trying to use.
https://codepen.io/blberrysmoothie/pen/JjmWNeN

CodePen
Jagoda
inputs status

...

final basin
#

All the change events for the checkboxes still seem to be working after clicking the button...

hushed surge
#

What I want to get, Is the check message in console from 'change' event. So that after I click 'select-all' button message will appear, in the same way as when I'm clicking all inputs separately 😦

final basin
#

You'll need to dispatch events and not just set the property of the checkbox... the code is something like this:

function selectAllInputs(){
  inputs.forEach(input => {
    //input.checked = !input.checked
    input.dispatchEvent(new Event('input'));
  })
}

You'll may also need to listen to the event on the individual checkboxs instead of the container.