Добавление eventListener к флажку

Question

Могу ли я добавить eventListener в JavaScript к флажку или мне нужно использовать этот атрибут в html onclick = someFunc(), чтобы вызвать функцию. Я установил a fiddle, где я попытался добавить eventListener, но это не дает ожидаемого результата.

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") 
      } 
     }); 
    } 
}); 

Answer 1

Да, вы можете. Просто разворачивать ваш код от всех функций, а также использовать change событие вместо этого, и он должен работать нормально

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

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

FIDDLE

Answer 2

Вы можете сделать наоборот, как этот

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

Answer 3

Вы можете просто удалить свою анонимную функцию

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"/>

Или, лучше использовать document.ready блок JQuery.

Answer 4

Ваш код не работает, потому что основные анонимные функции не выполняются.

Код, указанный ниже, должен работать на вас.

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);