El código que trato de optimizar:
function classToggle1() { document.getElementById("div1").classList.toggle('fa-folder'); document.getElementById("div1").classList.toggle('fa-folder-open'); } function classToggle2() { document.getElementById("div2").classList.toggle('fa-folder'); document.getElementById("div2").classList.toggle('fa-folder-open'); } function classToggle3() { document.getElementById("div3").classList.toggle('fa-folder'); document.getElementById("div3").classList.toggle('fa-folder-open'); } document.querySelector('#x').addEventListener('click', classToggle1); document.querySelector('#y').addEventListener('click', classToggle2); document.querySelector('#z').addEventListener('click', classToggle3);Mi enfoque que no funciona en los navegadores:
function classToggle(x) { document.getElementById(x).classList.toggle('fa-folder'); document.getElementById(x).classList.toggle('fa-folder-open'); } document.querySelector('#xx').addEventListener('click', classToggle("div1")); document.querySelector('#yy').addEventListener('click', classToggle("div2")); document.querySelector('#zz').addEventListener('click', classToggle("div3"));Aquí paso "div1", "div2" y "div3" como argumentos. ¿Tengo entendido que esos dos fragmentos de código deberían comportarse de la misma manera?
En el primer ejemplo, está pasando la función ( classToggle1 ), y en el segundo está invocando la función (que resulta que devuelve undefined ). Puede actualizar el segundo para enlambda la llamada.
document.querySelector('#xx').addEventListener('click', () => classToggle("div1"));O
document.querySelector('#xx').addEventListener('click', function () { classToggle("div1"); })Esto debería funcionar.
document.querySelector('#xx').addEventListener('click', () => classToggle("div1")); document.querySelector('#yy').addEventListener('click', () => classToggle("div2")); document.querySelector('#zz').addEventListener('click', () => classToggle("div3"));El punto es que está pasando la salida de classToggle(x) en lugar de pasar la función en sí.