Cambio de fondo al contar los clics

contador de clics con cambio de color de fondo

Hola, este articulo es una continuación del tutorial sobre como crear un contador de clics. Hoy le vamos a agregar un cambio de fondo al contar los clics. El código es bien sencillo y no lleva mucha indicación sobre como hacer el cambio de fondo al contar los clics.

Crear la función para cambiar el fondo

La base de este articulo esta en esta función. Esta función va a generar un color aleatorio (utilizando el método “Math.floor y Math.random” para generar el resultado aleatorio) el cual se le asignara como color de fondo a la sección o contenedor que contiene la información.

Sin mas agrega esta función al contador de clics:

function sbg(){
            const randColor = Math.floor(Math.random() * 16777215).toString(16);
            sect.style.backgroundColor = "#" + randColor;
        }

Después de tener nuestra función, vamos a llamarla donde deseamos que cambien el fondo. A la acción de clic del botón “Contar“, después que contamos el clic vamos a incluir la función anterior.

btnElm.onclick = function(){
            contar++;
            pElm.textContent = contar;
            
            sbg();
        }

Y lo incluimos en la función para el teclado también:


        document.body.onkeypress = function(ev){
            ...
                pElm.textContent = contar;
                
                sbg();
            }
        }

Con esto ya estamos casi listos, solo necesitamos blanquear el fondo, y para esto vamos a incluir la siguiente linea: “sect.style.backgroundColor = ‘white’;” a la función de resetear y a la tecla escape.

Código en el botón:

btnClear.onclick = function(){
            pElm.textContent = 0;
            contar = 0;
            
            sect.style.backgroundColor = "white";
        }

Código en la tecla escape:

document.body.onkeydown = function(ev){
            ...
                contar = 0;
                
                sect.style.backgroundColor = "white";
            }
        }

Y con esto ya estamos listos para ver el resultado

contador de clics con cambio de color de fondo