Hola, este articulo «Contador de clicks en listas», es la continuación del tutorial Contador de Clicks. Esta vez, vamos a utilizarlo en una lista no ordenada, y iremos contando los clicks hechos en cada linea de la lista, pero de forma independiente.
Contador de clics Parte HTML
El contenido HTML para este Contador de clicks en listas va a ser sencillo, vamos a crear una lista de 4 lineas para el ejemplo. Cada linea tendrá un botón el que ejecutara la función que contara los clicks que hagamos en la linea, un botón para limpiar y resetear el correo, y un contenedor que presentara el contador numérico para mostrar el numero de clicks hechos. Ademas, crearemos un botón que limpiara toda lista y regresara la lista entera al conteo de cero.
<section>
<h1>Contador en lista</h1>
<h2>usar contador en cada linea de la lista</h2>
<ul>
<li>
<div class="dlist">
<button class="txtCount">Primero - </button>
<span class="rcont">
<span class="clear">Clear</span> -
<span class="counternum"></span>
</span>
</div>
</li>
<li>
<div class="dlist">
<button class="txtCount">Segundo - </button>
<span class="rcont">
<span class="clear">Clear</span> -
<span class="counternum"></span>
</span>
</div>
</li>
<li>
<div class="dlist">
<button class="txtCount">Tercero - </button>
<span class="rcont">
<span class="clear">Clear</span> -
<span class="counternum"></span>
</span>
</div>
</li>
<li>
<div class="dlist">
<button class="txtCount">Cuarto - </button>
<span class="rcont">
<span class="clear">Clear</span> -
<span class="counternum"></span>
</span>
</div>
</li>
</ul>
<button id="clearall">Clear All</button>
</section>CSS para el contador de clicks
Aquí esta el estilo, bien simple para que todo este en pantalla de la manera mas sencilla posible.
<style>
section{text-align: center;}
ul{width: 90%;margin: 0;padding: 0;text-align: left;}
.dlist{transition: all .5s;list-style: none;padding: 8px 10px;margin: 5px;position: relative;width: 100%;}
.dlist:hover{border: 1px solid grey;}
.txtCount{cursor: pointer;}
.rcont{position: absolute;right: 10px;top: 50%;transform: translateY(-50%);}
.counternum{border-radius: 100%;background-color: cornflowerblue;padding: 5px 10px;margin:0;}
</style>Creando las funciones de los contadores de clicks
Ahora si vamos a la parte interesante. Vamos a comenzar a crear el script que nos va a permitir contar y cambiar el color de fondo de las lineas cunado hagamos clicks en ellas.
- Lo primero que vamos a hacer es comenzar declarando las variables y configurando los valores a cero. Las variables que declararemos van a llamar a las diferentes clases que creamos en la sección de HTML, así como el ID del botón que nos permitirá limpiar todo de un solo click.
- Después de crear las variables, crearemos un «forEach« para iniciar el contador y configurarlo a cero.
<script>
var counternum = document.querySelectorAll('.counternum'),
dlist = document.querySelectorAll('.dlist'),
txtCount = document.querySelectorAll('.txtCount'),
clearbtn = document.querySelectorAll('.clear'),
clearall = document.getElementById('clearall');
counternum.forEach(ev => {
ev.textContent = 0;
});
...
</script>- La primera función que vamos a estar creando es la función que cuenta los clics hechos. Debido a que vamos a utilizar el mismo contenido para todas las lineas de la lista esta función sera dedicada a ejecutar lo que sucede cuando hacemos click en el botón. Nuestra función «upd(id)» se encargara de contar los clicks y de generar un color aleatorio que se le asignara a la variable «randColor» y luego ser usada dentro del contenedor de la lista.
- Lo siguiente sera crear un evento de click por cada botón que se presione (nuestros botones estarán asignados a la variable «txtCount»), y a asignarle la función «upd(id)».
...
function upd(id){
id.nextElementSibling.children[1].textContent++;
const randColor = Math.floor(Math.random() * 16777215).toString(16);
id.parentElement.style.backgroundColor = "#" + randColor;
}
txtCount.forEach(ex =>{
ex.onclick = function(){
upd(ex);
};
});
...- Para limpiar los contadores por separado, de forma independiente, crearemos un «forEach« por cada botón «Clear» en el que devolveremos su valor a cero, así como configuraremos el color de fondo a blanco nuevamente.
...
clearbtn.forEach(aa =>{
aa.onclick = function(){
aa.nextElementSibling.textContent = 0;
aa.parentElement.parentElement.style.backgroundColor = "white";
};
});
...- Limpiando toda la lista con un solo click. Para esto, dentro de la función, vamos a repetir nuevamente la inicializacion a cero de las variables así como un método «forEach« para todos los miembros de la lista, para pintar el fondo de blanco nuevamente.
...
clearall.onclick = function(){
counternum.forEach(ev => {
ev.textContent = 0;
});
dlist.forEach(e=>{
e.style.backgroundColor = "white";
});
};
...El Final del contador de clicks
Con esto, ya es todo lo que necesitamos para crear este tutorial. espero les guste y si tienen alguna duda o idea de las que les gustaría que preparase un tutorial, no duden en dejarme un comentario.
Hasta un nueva entrada.