0

Intento crear un objeto el cual cada vez que pulse tab cambie a los colores del array que tengo definido, pero no me funciona.
¿Alguno podría ayudarme con la solución? Dejo el código que tengo, aunque sé que está mal.

</head>
    
    <body>
    
        <div class="pelotita"></div>
    
        <script>
            let colorPelotita = new Array('red', 'green', 'yellow', 'violet', 'pink', 'blue', 'black')
    
            function cambiarColor(pColor) {
                for (let posicion = 0; posicion < pColor.length; posicion++) {
                    document.querySelector('.pelotita').style.backgroundColor = `${pColor[posicion]}`
                }
            }
            cambiarColor(colorPelotita)
    
    
            function color(e) {
                if (e.keyCode == '32') {
                    cambiarColor(colorPelotita)
                }
            }
            window.onkeypress = color;
           </script>
        </body>
        </html>
1
  • Onkeypressed esta depreciado, aunq aun pueda funcionar deberias usar onkeydown. Tampoco es aconsejable usar new array, puedes usar mejor let pelotita = [valor,valor,.....]; por otro lado cada vez que llames a la funcion cambia color pasaria por todos los colores con solo presionar una vez tab. Yo encararia el codigo poniendo un addeventlistener al documento con evento keydown y evaluar ahi el codigo del tab y en vez de recorrer con un for declararia una variable contador para recorrer el array detectando con la lenght del array cuando llega al final y reseteandola Commented el 25 abr. 2021 a las 23:01

2 respuestas 2

1

Creo que ese no es el código de la tecla Tab. De acuerdo a esta página, la tecla Tab es la 9 y la 32 sería para espacio. Por otra parte, como ya te comentaron, no es bueno iniciar un array de esa manera. Te dejo mi visión de cómo sería funcional tu código. Espero te sirva de ayuda.

let colores = ['red', 'green', 'yellow', 'violet', 'pink', 'blue', 'black'];
const box = document.querySelector('div');
let press = 0;

document.addEventListener('keydown', (e) => {
  
  if(e.keyCode === 9){
    if(press < colores.length){
      box.style.backgroundColor = colores[press]
      press++;
    } else {
      box.style.backgroundColor = colores[0];
      press = 1;
    }
  }
})
<div style="height: 200px; width: 200px; background-color: #010230;">
</div>

0

Por si a alguien le interesa, lo he resuelto de la siguiente manera. Lo que hice fue crear una variable aleatoria, que recorriera mi array

if(e.keyCode == '32') {
                let posicionAleatoria = Math.trunc(Math.random() * colorPelotita.length);
                pelotita.style.backgroundColor = colorPelotita[posicionAleatoria];

            }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.