how do i decrease opacity for every click-CodePudding

i am tryng to make an IF function for a value of opacity and then divide it by 10 to get a decimal in a range between (0.9 to 0.0), the function works when there is no value (!e.target.style.opacity) and when opacityValue gets to 9; but then it gets stucked in 8, i want to trigger that event until opacity gets value to 0;

function toEternalDarkness(e) {
    let opacityValue = 9;
    let opacityDegree; 
    if (!e.target.style.opacity) {     
        opacityDegree = opacityValue / 10;   
        e.target.style.opacity = opacityDegree;
        console.log(opacityValue);
    } else if (e.target.style.opacity !== 0) {
        opacityValue--;
        opacityDegree = opacityValue / 10;
        console.log(opacityDegree);
        e.target.style.opacity = opacityDegree;        
    } else {return}

i tryed to declare the opacityDegree inside the iIF statement and it didnt work
i tryed to declare a new variable to store newOpacityValue and didnt work
i tryed a while loop inside the IF ELSE statement and it runs all the loop until opacity gets to zero;

here is a link for the projects i am trying to solve: https://github.com/AliQTank/Etch-a-Sketch/tree/Op002

a Grid created by multiple divs that change color with event listener mouseover, so i did my container background color black to decrease opacity level 10 percent for every event listener triggered and after 10 events, the color has to be totally transparent. somebody put a solution applyed to a button, and didnt work in my project because if i triggered my opacity in one cell(div) the other one triggered didnt start from beginning but from the last opacity event trigered

CodePudding user response：

Dividing by 10 every time will make it go invisible really fast. Does this work for you?

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  if (!btn.style.opacity) btn.style.opacity = '1';
  opacity = parseFloat(btn.style.opacity);
  btn.style.opacity = opacity - 0.2;
});

<button id="btn">Click Me</button>

CodePudding user response：

You can decrement the value within the division opacityValue-- / 10 return the results of a conditional. Since you are using a number type variable to decrement the value by 10, there is no need to parseInt.

The snippit show cases a div with a white background and with each click the elements opacity style is decremented by the calculation => opacityValue-- / 10.

let opacityValue = 9;

function toEternalDarkness(e) {
  return !e.target.style.opacity ? e.target.style.opacity = opacityValue-- / 10 : e.target.style.opacity = opacityValue-- / 10
}

document.querySelector('.cont').addEventListener('click', toEternalDarkness)

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

.cont {
  background-color: white;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

<div >
  Click Anywhere To Reduce The Opacity Of This Element
</div>