Inicialmente vamos a crear un código base en lenguaje HTML, (si usas VS Code al escribir HTML y seleccionar la segunda opción de autocompletar (HTML5) te dará la base)
Una vez tengamos el código HTML base listo vamos con los pasos
Paso 1 :
Crear el botón HTML
Es muy simple usando la etiqueta button dentro del body de tu HTML podrás hacer que tu pagina web tenga un botón
Entre las dos etiquetas vas a poner el texto que quieres que aparezca en el botón
<button>Este es mi boton
Paso 2 :
Selector
Un selector son etiquetas que le damos a los diferentes elementos de HTML para poder indentificarlos y llamarlos desde nuestro código en JavaScript o en CSS, Existen varios tipos de selectores pero en este caso vamos a usar un selector de id.
Para crearlo es tan simple como situarnos dentro de nuestra primera etiqueta button y antes de su cierre (>) vamos a poner id = “nombreDeId”, el nombre queda a tu elección en mi caso yo usare el nombre botón ya que estoy me ayudara a identificar que elemento estoy llamando.
"boton">Este es mi boton
Paso 3 :
Llamar al botón desde JavaScript
Ahora que ya tenemos nuestro botón perfectamente creado e identificado en el documento HTML ahora necesitamos hacer que para el archivo de JavaScript este botón exista.
Para esto vamos a asignar este botón a una variable con el codigo document.getElementById(""), esta funciónde JavaScript nos permite llamar un elemento de HTML por su id el cual vamos a escribir como argumento en sus parámetros dela siguiente manera:
let miBoton = document.getElementById(“boton”)
Listo! Ya tienes tu boton linkeado con tu archivo JavaScript, pero espera!
Ese boton todavia no hace nada, En el siguiente paso te voy a explicar como hacer que tu boton realice alguna funcion cuando el usuario de tu pagina le de click.
Paso 4:
Listeners
Antes de pasar a la explicación debes saber que los listener o escuchadores se utilizan para que como su nombre lo indica escuchen ciertas acciones del usuario, puede ser un click, la pulsación de una tecla, posicionar el mouse sobre un botón entre muchos otros.
En el caso de nuestro ejemplo necesitamos que nuestro botón “Escuche” cuando el usuario le da click y realice una acción, para esto usaremos nuestra variable “miBoton” la cual ya tiene conectado el botón de HTML y con la ayuda de la función función de JavaScript addEventListener() dentro de esta función vamos a pasar dos argumentos.
Primer argumento:
El tipo de evento que queremos escuchar en nuestro caso es el click por ello vamos a poner "click"
Segundo argumento:
Acá vamos a poner la función que queremos que se ejecute al dar click a nuestro botón pero OJO vas a escribir el nombre d etu función sin los paréntesis de lo contrario la función será llamada así no des click en el botón.
miBoton.addEventListener("click", miFuncion)
Listo tu boton ya es perfectamente funcional pero para no dejarte hasta ahi en mi ejemplo voy a hacer que al darle click le muestre una alerta al usuario para ello voy a crear la funcion que anteriormente habia pasado como parametro y este seria el codigo final y funcional .
<metacharset="“UTF-8”">
<buttonid="“boton”">Este es mi botonbutton>
<script><br> let miBoton = document.getElementById(“boton”)<br> miBoton.addEventListener(“click”, miFuncion)<br> function miFuncion(){<br> alert(“Hola has dado click en mi boton, muchas gracias. Ahor aingrese sus datos de tarjeta de credito porfavor 😃”)<br> }<br>script>
