Adding eventListener to checkbox

Question

Can I add an eventListener in JavaScript to a checkbox or do I have to use the attribute in html onclick = someFunc() to trigger a function. I set a up a fiddle where I tried to add an eventListener, but that does not give me the expected output.

var checkb = document.getElementById("checkbox1");

(function() {

    checkbFunc(checkb);

    function checkbFunc(checkb) {
        checkb.addEventListener("click", function(e) {
            if (checkb.checked) {
                alert("i am checked");

            } else {
                alert("i am not checked")
            }
        });
    }
});

You never execute the function. Do you mean to Immediately Invoke that Function Expression? — Andrew Li
– Andrew Li, Commented Sep 29, 2016 at 12:38
@AndrewL. with other functions, written like this, it works! — four-eyes
– four-eyes, Commented Sep 29, 2016 at 12:40
(function() { ... }); never executes the anonymous function. But if you change it to (function() { ... })(); then it does and your fiddle works. — Jason P
– Jason P, Commented Sep 29, 2016 at 12:40

adeneo · Accepted Answer · 2016-09-29 12:40:06Z

1

Yes, you can. Just unwrap your code from all the functions, and use the change event instead, and it should work fine

var checkb = document.getElementById("checkbox1");

checkb.addEventListener("change", function(e) {
    if (this.checked) {
        alert("i am checked");
    } else {
        alert("i am not checked")
    }
});

FIDDLE

answered Sep 29, 2016 at 12:40

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Li Over a year ago

Or execute the function expression using (function() { ... })();

Dhaval Marthak · Accepted Answer · 2016-09-29 12:41:31Z

0

You can do other way around like this

var checkb = document.getElementById("checkbox1");

(function() {

    checkbFunc(checkb);

    function checkbFunc(checkb) {
        checkb.addEventListener("click", function(e) {
            if( checkb.checked ) {
                alert("i am checked");

            } else {
                alert("i am not checked")
            }
        });
    }
})(); // <--added this

Demo

answered Sep 29, 2016 at 12:41

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Comments

Alessandro · Accepted Answer · 2016-09-29 12:41:43Z

0

You could simply remove your anonymous function

var checkb = document.getElementById("checkbox1");

checkbFunc(checkb);
    
function checkbFunc(checkb) {
  checkb.addEventListener("click", function(e) {
    if( checkb.checked ) {
      alert("i am checked");

    } else {
      alert("i am not checked")
    }
  });
}

<input type="checkbox" id="checkbox1"/>

Or, better, use JQuery document.ready block.

answered Sep 29, 2016 at 12:41

Alessandro

4,4729 gold badges43 silver badges71 bronze badges

Comments

Nehal Gala · Accepted Answer · 2016-09-29 12:43:09Z

0

your code is not working because the main anonymous functions is not executed.

The code below should work for you.

var checkb = document.getElementById("checkbox1");

(function() {

  checkbFunc(checkb);

    function checkbFunc(checkb) {
        console.log(checkb);
        checkb.addEventListener("click", function(e) {
            if( checkb.checked ) {
                alert("i am checked");

            } else {
                alert("i am not checked")
            }
        });
    }
}() // Add these round braces );

answered Sep 29, 2016 at 12:43

Nehal Gala

5364 silver badges5 bronze badges

Collectives™ on Stack Overflow

Adding eventListener to checkbox

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related