Comprobar si JavaScript hace clic en un botón

Anika Tabassum Era 30 enero 2023 JavaScript JavaScript Button JavaScript EventListener
  1. Use el atributo HTML onclick para verificar el clic del botón en JavaScript
  2. Utilice onclick como método de JavaScript
  3. Use el método addEventListener para verificar los clics en los botones
Comprobar si JavaScript hace clic en un botón

En JavaScript, el método onclick y addEventListener son la forma más común de manipular una acción.

Usaremos onclick como un atributo HTML para verificar si se hace clic en el button. Nuevamente, continuaremos la verificación con el método onclick manipulando el DOM, y luego veremos el uso de addEventListener para comprender si el clic del botón está funcionando o no.

Use el atributo HTML onclick para verificar el clic del botón en JavaScript

Para este caso, tomaremos un elemento de etiqueta button y agregaremos el atributo onclick.

El atributo tendrá una función llamada cada vez que se haga clic en el botón. Aunque onclick es completamente un método de JavaScript, como atributo HTML, es bastante común usarlo para activar una función específica en un evento de clic.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn" onclick="clicked()">Click here</button>
  <script>
   const btn = document.getElementById('btn');
  function clicked(){
    btn.style.background = "purple";
    console.log("CLICKED");
  }
  </script>
</body>
</html>

Producción:

onclick_atributo

En este ejemplo, la función clicked() tiene un cuerpo de código que cambia el fondo de estilo de gris a morado cada vez que se hace clic en el botón.

Utilice onclick como método de JavaScript

onclick en JavaScript se enfoca en un solo evento para llamar a la función de devolución de llamada. Este método también enfatiza la ejecución de un cuerpo de función que se declara después del inicio del método.

Pero primero, el método onclick requiere que se siga un objeto. El querySelector del elemento HTML define el objeto aquí.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn">Click here</button>
  <script>
  const btn = document.getElementById('btn');
    btn.onclick = function(){
      btn.style.color = "yellow";
    console.log("CLICKED!");
    }
  </script>
</body>
</html>

Producción:

onclick_method

Aquí, la aparición del evento de clic se muestra en la consola como CLICKED! y el estilo del botón también cambia su color de fuente de blanco a amarillo. El método btn.onclick se pone en marcha para ejecutar la función correspondiente, y así se visualiza el cambio tras el clic.

Use el método addEventListener para verificar los clics en los botones

Por lo general, el método addEventListener no es compatible con los navegadores más antiguos, pero puede marcar varios eventos.

Aquí, usaremos un evento, click, y la función que manejará el evento activará el botón para cambiar. Además, imprimiremos algo en el panel de la consola para estar más seguros de la actividad del evento.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    input{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
    p{
      background: white;
      color: gray;
    }
  </style>
</head>
<body>  
  <input type="button" id="btn" value="Click Here">
  <p id="after"></p>
  <script>
    const btn = document.getElementById('btn'); 
    function getItDone(){
      document.getElementById('after').innerHTML = "I am clicked."
      console.log("CLICKED!");
    }
    btn.addEventListener('click', getItDone);
  </script>
</body>
</html>

Producción:

añadireventlistener

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete
Autor: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Artículo relacionado - JavaScript Button

Artículo relacionado - JavaScript EventListener