Este es el código que tengo con el detector de eventos onclick .
function makeSizer(size) { alert(size) document.body.style.fontSize = size + 'px'; } document.getElementById('size-12').onclick = makeSizer(14); document.getElementById('size-14').onclick = makeSizer(16); body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } <p>Some paragraph text</p> <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a>Sin embargo, no tengo idea de por qué una vez que se carga el navegador, el evento en el que se hizo clic se activa inmediatamente o antes de que haga clic en el enlace. Podrías ayudarme a explicar esto.
Una solución que obtuve es usar el cierre como se muestra a continuación al devolver una función. Me pregunto si tienes otros?
function makeSizer(size) { return function (){ alert(size) document.body.style.fontSize = size + 'px'; } }Por cierto, puede haber un duplicado aquí . Sin embargo, estoy buscando una explicación/discusión más general que la depuración.
Gracias.
Prueba esto:
function makeSizer(size) { alert(size) document.body.style.fontSize = size + 'px'; } document.getElementById('size-12').onclick = function() { makeSizer(14); } document.getElementById('size-14').onclick = { makeSizer(16); }Está asignando el resultado devuelto por makeSizer(14) al atributo onclick del elemento.
Si desea llamar a makeSizer(14) al hacer clic, envuélvalo en una función:
function makeSizer(size) { alert(size) document.body.style.fontSize = size + 'px'; } document.getElementById('size-12').onclick = () => makeSizer(14); document.getElementById('size-14').onclick = () => makeSizer(16); body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } <p>Some paragraph text</p> <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a>