javascript click event handler fires without clicking
Why does this function get fired without having clicked on the specified button? I had a look at a few similar problems but none deal with this code structure (might be obvious reason for this im missing...).
document.getElementById("main_btn").addEventListener("click", hideId("main");
function hideId(data) {
document.getElementById(data).style.display = "none";
console.log("hidden element #"+data);
}
You are directly calling it.
document.getElementById("main_btn").addEventListener("click", hideId("main");
You should do that in a callback.
document.getElementById("main_btn").addEventListener("click", function (){
hideId("main");
});
This code executes your function hideId("main")
you should pass just the callback's name:
document.getElementById("main_btn").addEventListener("click", hideId);
function hideId(event) {
var id = event.target.srcElement.id; // get the id of the clicked element
document.getElementById(data).style.display = "none";
console.log("hidden element #"+data);
}