Increase opacity on hover [JavaScript]-CodePudding

newbie here. I am finishing my assignment from Odin Project which is to make an Etch a Sketch. Although the code I wrote might be lengthy and repetitive, everything's working just fine except for the Grayscale option.

What I want to achieve with the Grayscale option is... every time the mouse hovers on a square it increases the opacity until it gets to 1.

So, I tried checking the opacity and then adding 0.1 every time the mouse hovers but it seems to add only once (as it shows in the console style="background-color: rgb(232, 232, 232); opacity: 0.2;").

I am showing the "case rainbow" just as an example because it works perfectly, every time the mouse hovers on the same square it changes to another 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;

Thank you very much for your help :)

CodePudding user response：

This code works for me, hope it's what you wanted too.
It get the current opacity to increase it each time, the problem in your code was that it reset your opacity variable every time the function were called.

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
  onm ouseover="setColor(this)"
  style="padding:50px; opacity:0"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

CodePudding user response：

If you want to be the hackerman:

    const raiseOpacity = (e) => !~~( e.style.opacity) ? (e.style.opacity =  e.style.opacity   0.1) : 1;

<div onm ouseover="raiseOpacity(this)" style="padding:50px; opacity:0.1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>