¿Por qué las funciones anidadas en una función anónima esperan a que se haga clic en el botón (como debería), pero cuando la función no está anidada, se ejecuta en la carga de la página sin esperar a que se haga clic en el botón?
Ejemplo de trabajo:
btn1.onclick = function() {cityChoice(1)}; //code works only on button click as expectedEjemplo que no funciona:
btn1.onclick = cityChoice(1); //function runs on pageload without waiting for button click?Cualquier enlace a documentación/artículos es bienvenido, ya que no pude encontrarlos en Google ni en StackOverflow que explicaran esto.
Lenguaje de codificación: JavaScript (vainilla)
Nivel de habilidad: Principiante
Editor: Código de Visual Studio
Sistema operativo: Windows 7
btn1.onclick = cityChoice(1); no es una función anidada. Simplemente llamó a la función cityChoice y su valor devuelto se guardó como propiedad onclick de la variable btn1 .
Hay varias formas en que puede lograr lo mismo para vincular al oyente a un evento:
btn1.onclick = function() { } <-- función anónima
btn1.onclick = () => { } <-- función de flecha
En conclusión:
btn1.onclick = cityChoice(1) <-- se invoca la función cityChoice y su valor se guarda en btn1.onclick
Árbitro:
cityChoice es una función y asumo que está tratando de pasarle su argumento predeterminado 1 , el problema que está viendo es que está invocando cityChoice en su segundo ejemplo y asignando el resultado de cityChoice(1) para hacer clic en lugar de registrar un controlador de eventos. Supongo que esto devolvería un objeto javascript normal. onclick debe ser un controlador de eventos (cualquier función anónima o no)
Cuando usas este cityChoice(1); sin función anidada.
Javascript lo entiende como si lo escribiera sin el evento onclick . Es como si lo llamara al cargar la página.
Pero la declaración de function asigna una nueva función cuando se la llama llamar a cityChoice(1) .