Creé una función de JavaScript con un argumento predeterminado remove = false , pero cuando no se pasa ningún valor, el parámetro de eliminación no adquiere el valor "falso" predeterminado en lugar de eso, adquiere un objeto muy grande, vea mi código de función: -
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"; } } SALIDA CUANDO LA FUNCIÓN SE LLAMA COMO: clickEventInfoBtn_CB(true)
obtenemos remove = true;
y cuando,
ES LLAMADO POR EVENTLISTNER:-
obtenemos remove = PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …};
Al pasar valores de parámetros, use una "función anónima" que llame a la función especificada con los parámetros:
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 siempre proporciona el evento como un argumento para la función de devolución de llamada. Así que esto no funcionaría. Puede cambiar fácilmente su código para cumplir con sus requisitos de esta manera
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"; } }El primer argumento para una función de listado de eventos será el evento por el cual se ejecutó. Entonces, si desea realizar la llamada de función sin el objeto de evento, puede usar una función de flecha y la llamada de función sin el evento.
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>