Entrada destacada

Como usar enums en Android, kotlin

el
0

Contador de clicks en JavaScript

el
El siguiente ejemplo es un contador de clicks(clicks sobre un botón), el número de clicks se muestra en un elemento <p></p>.

Código del ejemplo.
<html>
    <head>
        <meta charset="utf-8">
        <title>Ejemplo 1.1</title>
        <style type="text/css">
            #areaContador {
                font-size: 40px;
                font-weight: bold;
                font-family: impact;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <button id="botonClick">Click</button>
        <p id="areaContador"></p>
        <script type="text/javascript">
            var botonElement = document.getElementById("botonClick");
            var pElement = document.getElementById("areaContador");
            var contador = 0;
            botonElement.onclick = function () {
                contador++;
                pElement.textContent = contador;
            }
        </script>
    </body>
</html>

El código html consta de un "botón" con id igual a "botonclick" y una etiqueta "p" con id igual a "areaContador" con los cuales podremos acceder desde javascript.

El código javascript paso a paso.


1.- Creamos una variable que almacenara el elemento botón, necesitamos está referencia para saber cuándo se la ha hecho click al botón.

2.- Creamos una variable que guarda el objeto que hace referencia al elemento p que es donde se muestra los números del contador.

3.- Creamos una variable del tipo entero, que inicialmente tiene valor de 0, esta variable la usamos para incrementar su valor y mostrarlo en el documento html.

4.- Finalmente atrapamos el evento click que se hace sobre el botón, para lo cual se tiene que hacer lo siguiente:  Mediante la variable que representa al elemento del botón, seguido de un punto, seguido del nombre del evento en este caso "onclick" después para indicarle, qué queremos que pase cuando se detecte un click sobre el botón, le pasamos como valor una función anónima (es una función anónima porque no hay necesidad de nombrarla). 
Entonces en nuestro ejemplo indicamos que cuando se detecte un evento click sobre el botón se ejecute lo que está contenido entre las llaves de la función anónima.

5.- El contenido de la función anónima es sencilla solamente sumamos 1 a la variable contador (esto pasará cada que se haga click sobre el bóton); la sentencia "contador++" es igual que hacer "contador +1". Luego simplemente mostramos este resultado en el elemento "p" accediendo a la propiedad "textContent" y asignándole un valor o texto. Para los elementos como los "p", "div", "span" entre otros esto se puede hacer accediendo a la propiedad "textContent".

Algunos otros Eventos (Cosas que suceden a los elementos HTML).

Un evento puede ser algo que hace el navegador o el usuario.

los eventos también son atributos de los elementos HTML como el "value", "textContent", "type", etc.

  <script>
        var elemento = document.getElementById("idElemento");
        elemento.onclick = function(){ 
            /*lo que queremos que pase cuando sucede un click sobre el elemento*/
        }
        elemento.onmouseover = function(){ 
            /*lo que queremos que pase cuando el puntero del ratón pasa sobre el elemento*/ 
        }
    </script>


Escribe tus dudas en los comentarios.

Comentarios

  1. rbn19 de agosto de 2022, 13:45

    Hola, primero felicitate, ando buscando algo asi, mi pregunta es como se puede hacer para incrustarlo o poner un enlace dentro de ese boton para saber cuantas veces alguien cliquea sobre un enlace en mi sitio, gracias.

    ResponderEliminar
    Respuestas
    1. Anónimo16 de febrero de 2023, 12:44

      Solo agrega un elemento a dentro del botón

      Eliminar
  2. Anónimo11 de noviembre de 2022, 12:27

    Recién estoy aprendiendo JS, y estoy haciendo un reto de la página FrontendMentor, ya me habia llenado de eventlisteners y comenzaba a frustarme.. Gracias a ti me ha quedado muchisimo más limpio el código y legible. GRACIAS

    ResponderEliminar
  3. Anónimo24 de noviembre de 2022, 7:51

    Buenos días! Y como seria si quiero guardar el valor de ese contador en una base de datos cada vez que hago click? Desde ya muchas gracias

    ResponderEliminar
  4. Alejandro Ramirez S. Blog9 de marzo de 2023, 16:42

    Saludos... Estoy buscando un contador de este tipo para un sitio wordpress, tipo directorio, en el que cada publicacion es de un cliente diferente y se quiere hacer un conteo de click al enlace a su Whatsapp

    ResponderEliminar

Publicar un comentario