Acción onClick en JavaScrip.

Bueno amigos hoy les traigo un post fácil y sencillo en JavaScript, la acción onclick de un botón que no es mas que indicar al botón que realice alguna acción al ser presionado.



Existen muchas varias formas de realizar pero solo les hablare de dos.

Bueno la primera es la más primitiva y que hoy en día ya no se recomienda realizarlo, en esta forma lo único que hacemos es agregarle al tag button el atributo onclick y especificandele la función que debe mandar llamar al presionar el botón, como se puede apreciar en el siguiente código:
<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   <script>
      //dentro de estos dos tags colocamos nuestro código javaScript   
      //creamos la función que mandara llamar el botón, y dentro todo lo que queramos que realice
      function nombreFuncion(){
        alert("hola javascript");
      }    
   </script>
 </head>

 <body>
   <button onclick="nombreFuncion();">Presioname</button>
 </body>
</html>

y listo ya tenemos nuestra acción del botón pero como comente anteriormente ya no se recomienda realizarlo de esa forma.

Ahora veremos la segunda forma y la mas recomendada, que consta de enlazar el botón o input, para poder tener un mayor control sobre el, de hecho es la forma en que personalmente la trabajo.

Debemos tener en cuenta en que es necesario agregar un id al botón para poder enlazarlo, veamos un ejemplo en el código siguiente:
<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   <script>
      //creamos la función que mandara llamar el botón, y dentro todo lo que queramos que realice
      function nombreFuncion(){
        alert("hola javascript");
      }
      //creamos nuestra función onload para asegurar que js se ejecute una vez que todo este cargado
      window.onload = function(){  
         //ahora enlazamos nuestro botón, utilizando en id
         var miboton = document.getElementById("btn_aceptar");
           
         //ahora simplemente mandamos llamar el 
         //método en donde tenemos todas las instrucciones
         //nota: el nombre de la función al ser llamado
         //no lleva paréntesis.
         miboton.onclick = nombreFuncion;
      }    
   </script>
 </head>

 <body>
   <!--como podemos ver agregamos un id con el nombre que ustedes quieran-->
   <button id="btn_aceptar">Presioname</button>
 </body>
</html>

Y listo así de fácil tenemos nuestra acción, les comento que con JQuery es más fácil aun, pero eso lo veremos en otro post, bueno espero que les sirva y comenten cualquier duda.

Aquí abajo le pongo el vídeo del evento onclick.

video