novato aquí. Estoy terminando mi tarea de Odin Project que es hacer un Etch a Sketch. Aunque el código que escribí puede ser largo y repetitivo, todo funciona bien, excepto la opción Escala de grises.
Lo que quiero lograr con la opción Escala de grises es... cada vez que el mouse se desplaza sobre un cuadrado, aumenta la opacidad hasta que llega a 1.
Entonces, traté de verificar la opacidad y luego agregar 0.1 cada vez que el mouse se desplaza, pero parece agregar solo una vez (como se muestra en la consola style="background-color: rgb(232, 232, 232); opacity: 0.2; " ).
Estoy mostrando el "arcoíris de casos" solo como ejemplo porque funciona perfectamente, cada vez que el mouse se desplaza sobre el mismo cuadrado, cambia a otro color.
const setColor = (e) => { switch (colorTheme) { case "rainbow": let rainbowOptions = ['#9400D3', '#4B0082', '#0000FF', '#00FF00', '#FFFF00', '#FF7F00', '#FF0000']; let rainbowSelection = rainbowOptions[Math.floor(Math.random() * rainbowOptions.length)]; colorPick = rainbowSelection; e.target.style.backgroundColor = colorPick; break; case "grayscale": let currentOpacity = 0.1 colorPick = "#E8E8E8"; e.target.style.opacity = currentOpacity; e.target.style.backgroundColor = colorPick; if (e.target.style.opacity <= 0.9) { e.target.style.opacity = `${currentOpacity + 0.1}`; console.log(e.target) } else { e.target.style.opacity = 1; } break;Muchas gracias por su ayuda :)
Este código funciona para mí, espero que sea lo que querías también.
Obtiene la opacidad actual para aumentarla cada vez, el problema en su código era que restablecía su variable de opacidad cada vez que se llamaba a la función.
let colorPick; const setColor = (e) => { colorPick = "#E8E8E8"; e.style.backgroundColor = colorPick; if (e.style.opacity <= 0.9) { e.style.opacity = +e.style.opacity + 0.1; // +e.style.opacity to convert opacity from string to number } } <div onmouseover="setColor(this)" style="padding:50px; opacity:0" > Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>Si quieres ser el hackerman:
const raiseOpacity = (e) => !~~(+e.style.opacity) ? (e.style.opacity = +e.style.opacity + 0.1) : 1; <div onmouseover="raiseOpacity(this)" style="padding:50px; opacity:0.1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>