Hacer boton js con variantes de activacion

 Bueno ahora toca explicar las variantes de llamar a una funcion atraves del boton html con el evento onclick:

Primero que nada expliquemos que significa onclick=""

Es el valor entre tipo de dato cadena que luego el navegador convierte a codigo javascript

Osea podes poner sentencias simples como let x=1 o llamadas a funciones f() 

Si pones sentencias simples todas deben estar separadas por punto y coma 

Bien esta es la idea veamoslo en codigo

Caso 1: usar funcion con nombre

<button onclick="saludar()">Haz clic para saludar</button>

 <p id="mensajeSaludo"></p>

 <script>

 function saludar() { document.getElementById("mensajeSaludo").innerHTML = "Hola Bienvenido!"; } </script>

 

Aqui la funcion saludar se definio dentro de la estiqueta script

Caso 2: usar funcion anonima

<button onclick=" (function(){ document.getElementaById('mensajeSaludo').innerHTML = 'Hola Bienvenido';})()"> Haz clic para saludar</button>

 <p id="mensajeSaludo"></p>

 Cuando usas funciones anonimas se deben invocar inmediatamente se define

Asi se define la funcion anonima: function(){}

Asi se la invoca (function(){})()

Osea entre parentesis y luego los parentesis ()

Caso 3: usar funcion anonima con escape

<button onclick=" (function(){ document.getElementaById( \"mensajeSaludo\" ).innerHTML = \"Hola Bienvenido.\" ;})()"> Haz clic para saludar</button>

 <p id="mensajeSaludo"></p>

 Aqui se escapa que quiere decir, usar \ antes de poner las comillas dobles, ya que dentro del onclick no puedes tener comillas doble usa comillas simples o \, sino no funcionara el codigo

 Lo mismo si haces funciones flecha con parte de codigo si tenes comillas dobles, escapala quiere decir que la comilla doble sera tratada como string parte de la cadena en pantalla 

Caso 4 usar funcion flecha

<button onclick=" ( () => { document.getElementaById('mensajeSaludo').innerHTML = 'Hola Bienvenido';})()"> Haz clic para saludar</button>

 <p id="mensajeSaludo"></p>

Lo mismo que en funcion anonima se la invoca entre parentesis y luego ()

Caso 5 usando sentencias sin escape

 <button onclick=" document.getElementaById('mensajeSaludo').innerHTML = 'Hola Bienvenido'; "> Haz clic para saludar</button>

 <p id="mensajeSaludo"></p>

 

 Como se dijo antes sin escape es solo onclick="" usara comillas dobles, todo tu codigo usa comillas simples '

 Caso 6 usando sentencias con escape

<button onclick=" document.getElementaById(\"mensajeSaludo\").innerHTML = \"Hola Bienvenido\"; "> Haz clic para saludar</button>

 <p id="mensajeSaludo"></p>

 Como se dijo antes con escape onclick="" usara comillas dobles, y todo tu codigo usa comillas dobles tambien salvo que antes de la comillas dobles uses la barra invertida: \"