(function(){
var btn = document.getElementsByClassName("btn");
btn.addEventListener('click', function(e) {
switch (e.target.id){
case "btn01":
console.log("button one selected!");
break;
case "btn02":
console.log("button two selected!");
break;
case "btn03":
console.log("button three selected!");
break;
case "btn04":
console.log("button four selected!");
break;
default:
console.log(e.target.id);
//console.log("wtf?");
}
})
})
btn is a nodelist and not an element. You need to add the event listener to the individual elements/nodes, you can’t achieve anything by adding it to the nodelist itself as it will never be triggered there
The following will attach the listener to every element with the class.
(function(){
[].forEach.call(document.getElementsByClassName("btn"), function(btn) {
btn.addEventListener('click', function(e) {
switch (e.target.id){
case "btn01":
console.log("button one selected!");
break;
case "btn02":
console.log("button two selected!");
break;
case "btn03":
console.log("button three selected!");
break;
case "btn04":
console.log("button four selected!");
break;
default:
console.log(e.target.id);
//console.log("wtf?");
}
})
})
});
I got it working after Felgall it still didn’t do anything that was because I didn’t call it so I added () at the end of the block now it works. Thanks Felgall!