I want to add change
event to a group of checkboxes, how can I access this
in my event function, so that when I do the event I can access value of the checkbox.
This is my current code:
var checkboxes = document.getElementsByClassName('cb'); Array.from(checkboxes).forEach(function(){ this.addEventListener("change", cbChange(this), false); }); function cbChange(ele){ console.log(ele.value); }
<input class="cb" type="checkbox" name="candidate" value="1"/> <input class="cb" type="checkbox" name="candidate" value="2"/> <input class="cb" type="checkbox" name="candidate" value="3"/> <input class="cb" type="checkbox" name="candidate" value="4"/>
Advertisement
Answer
Inside the forEach
callback, this
does not refer to a DOM element. It doesn’t refer to any useful value.
Secondly, you are immediately calling cbChange
and pass its return value to addEventListener
, which is undefined
. But addEventListener
expects to be passed a function, so you either have to pass cbChange
or a function that calls cbChange
.
Lastly, while you could define the event handler to accept the element as first argument, it’s much simpler if it accepts the event object, because that is the default API.
Having said all that, the simplest solution would be:
var checkboxes = document.getElementsByClassName('cb'); Array.from(checkboxes).forEach(function(element){ // ^^^^^^^ element.addEventListener("change", cbChange, false); //^^^^^^^ }); function cbChange(){ console.log(this.value); // ^^^^ }
Since inside an event handler, this
refers to the element the handler is bound to, using this
inside cbChange
just works.
And here are some alternatives:
// Use the event object var checkboxes = document.getElementsByClassName('cb'); Array.from(checkboxes).forEach(function(element){ element.addEventListener("change", cbChange, false); }); function cbChange(event){ console.log(event.target.value); } // Using a wrapper that calls `cbChange` var checkboxes = document.getElementsByClassName('cb'); Array.from(checkboxes).forEach(function(element){ element.addEventListener("change", function() { cbChange(this); }, false); }); function cbChange(ele){ console.log(ele.value); }