CODEWITHSUNDEEP
javascriptif-statementdomincrement
Alber_Quintana
Alber_Quintana

Reputation: 21

how do i decrease opacity for every click

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 (opacityValue > 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 ones get triggered from the last opacityValue, at the end one cell is triggreder from opacity 1 to 0.8 other from 1 to 0.7 and the last ones get from opacity 1 to opacity 0

Upvotes: 2

Views: 497

Answers (3)

Alber_Quintana
Alber_Quintana

Reputation: 21

let opacityIndex = 10;
let opacityValue;
var opacityDegree;

function toEternalDarkness(e) {
    opacityValue = opacityIndex -1;
    opacityDegree = opacityValue / 10;
    if (!e.target.style.opacity) {
        e.target.style.opacity = opacityDegree;      
    } else if (e.target.style.opacity !== 0) {
        e.target.style.opacity -= 0.1;
    } else {return}
}

this is the link to my github solution: https://github.com/AliQTank/Etch-a-Sketch

and this is the preview: https://codepen.io/AliQTank/pen/GRGNbJz

Upvotes: 0

dale landry
dale landry

Reputation: 8610

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 class="cont">
  Click Anywhere To Reduce The Opacity Of This Element
</div>

EDIT: In the following snippit we use an object to track the click of elements laid out in a row on the page.

let opacityValue = 9;

// empty obj to hold each element and its current opacity value
const sequence = {}

// use spread to turn elements into array
let sels = [...document.querySelectorAll('.selections')]

const toEternalDarkness = (e) => {
  // get the index of the event target within its nodelist using indexOf()
  // if the opacity value is greater than -1, then set the event targets opacity to
  // the value found in the array - 1 then divided by 10
  return sequence[sels.indexOf(e.target)].opacity > -1 ? e.target.style.opacity = sequence[sels.indexOf(e.target)].opacity--/ 10 : null  
}

// loop over array of elements
sels.map((sel, key) => {
  // map initial sequence array to starting opacityValue using key
  sequence[key] = { opacity: opacityValue }
  // add event listener to each element and call toEternalDarkness method
  sel.addEventListener('click', toEternalDarkness)
})
body {
  background-color: black;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  padding: 2rem;
}

.selections {
  height: 200px;
  width: 30px;
  background-color: white;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="selections">
  1
</div>
<div class="selections">
  2
</div>
<div class="selections">
  3
</div>
<div class="selections">
  4
</div>
<div class="selections">
  5
</div>
<div class="selections">
  6
</div>
<div class="selections">
  7
</div>
<div class="selections">
  8
</div>

Upvotes: 1

Michael M.
Michael M.

Reputation: 11080

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>

Upvotes: 1

Related Questions