Uso de la propiedad this en funciones llamadas desde elementos del DOM

Pincha sobre cada elemento

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  1. Empezamos definiendo una variable que guarde el nodo que hemos reducido, hasta que no pulsemos en un cuadro la variable no tendrá contenido
  2. En la función para reducir la escala primero comprobamos si el elemento reducido es el que pinchamos, en ese caso lo aumentamos y la función termina
  3. En caso que no, comprobamos si hay algún elemento reducido y si es así lo aumentamos
  4. Aplicamos reducción al elemento sobre el que hemos clicado
  5. Definimos la variable reducido con el elemento que hemos clicado
  6. En la función para aumentar aumentamos la escala del elemento reducido y establecemos reducido a undefined
  7. Por último, asignamos la función de reducir al evento click de cada elemento

        let reducido;
        function reduceEscala() {
            if (reducido == this) {
                aumentaEscala();
                return;
            } 
            else if(reducido) {
                aumentaEscala();    
            }
           this.style.transform = 'scale(.2) rotate(360deg)';
           reducido = this;
        }
        function aumentaEscala() {
           reducido.style.transform = 'scale(1) rotate(-360deg)';
           reducido = undefined;
        }

        const BOTONES = document.getElementsByClassName('cuadro');
        for (const boton of BOTONES) {
            boton.onclick = reduceEscala;
        }