I have created a JavaScript Function with a default argument remove = false but when No value is passed the remove parameter do not acquire the default "false" value instead of that it acquires a very large object, See my Function code:-
infoBtnCB.addEventListener("click", clickEventInfoBtn_CB);
function clickEventInfoBtn_CB(remove = false) {
console.log(remove);
if (remove) {
infoBtnCB.classList.remove("active-info-btn-CB");
} else {
infoBtnCB.classList.toggle("active-info-btn-CB");
}
if (infoBtnCB.innerHTML == "Info" && !remove) {
setTimeout(() => {
infoBtnCB.innerHTML =
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque accusamus ipsum, quidem harum similique blanditiis, veritatis nam sapiente tenetur rerum temporibus asperiores, commodi consequatur corporis quisquam aspernatur quas laudantium eaque.m";
}, 100);
} else {
infoBtnCB.innerHTML = "Info";
}
}
OUTPUT WHEN FUNCTION IS CALLED AS : clickEventInfoBtn_CB(true)
we get remove = true;
and when,
IT IS CALLED BY EVENTLISTNER:-
we get remove = PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …};
When passing parameter values, use an "anonymous function" that calls the specified function with the parameters:
document.getElementById("myBtn").addEventListener("click", function(p) {
p = false;
myFunction(p);
});
function myFunction(a) {
document.getElementById("demo").innerHTML = a;
}<button id="myBtn">Try it</button>
<p id="demo"></p>Eventhandler always give the event as an argument to the callback function. So this would not work. You can easily change your code to fulfill your requirements in this way
infoBtnCB.addEventListener("click", () => { clickEventInfoBtn_CB(); });
function clickEventInfoBtn_CB(remove = false) {
console.log(remove);
if (remove) {
infoBtnCB.classList.remove("active-info-btn-CB");
} else {
infoBtnCB.classList.toggle("active-info-btn-CB");
}
if (infoBtnCB.innerHTML == "Info" && !remove) {
setTimeout(() => {
infoBtnCB.innerHTML =
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque accusamus ipsum, quidem harum similique blanditiis, veritatis nam sapiente tenetur rerum temporibus asperiores, commodi consequatur corporis quisquam aspernatur quas laudantium eaque.m";
}, 100);
} else {
infoBtnCB.innerHTML = "Info";
}
}
The first argument for an event listner function will be the event by which it was executed. So if you wnt to make the function call without the event object, you could make use of an arrow function, and the function call without the event.
const infoBtnCB = document.getElementById("infoBtnCB");
infoBtnCB.addEventListener("click",(e) => clickEventInfoBtn_CB());
function clickEventInfoBtn_CB(remove = false) {
console.log(remove);
if (remove) {
infoBtnCB.classList.remove("active-info-btn-CB");
} else {
infoBtnCB.classList.toggle("active-info-btn-CB");
}
if (infoBtnCB.innerHTML == "Info" && !remove) {
setTimeout(() => {
infoBtnCB.innerHTML =
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque accusamus ipsum, quidem harum similique blanditiis, veritatis nam sapiente tenetur rerum temporibus asperiores, commodi consequatur corporis quisquam aspernatur quas laudantium eaque.m";
}, 100);
} else {
infoBtnCB.innerHTML = "Info";
}
}<button id="infoBtnCB">Click Me</button>