javascript - 如何降低每次点击的不透明度

Question

我正在尝试为不透明度值创建一个 IF 函数，然后将其除以 10 以获得 (0.9 到 0.0)之间的小数，该函数在没有value (!e.target.style.opacity) 并且当 opacityValue 达到 9 时；但随后它卡在 8 中，我想触发该事件，直到不透明度的值为 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}

我尝试在 iIF 语句中声明 opacityDegree，但没有成功
我尝试声明一个新变量来存储 newOpacityValue 但没有成功
我在 IF ELSE 语句中尝试了一个 while 循环，它运行所有循环，直到不透明度为零；

这是我正在尝试解决的项目的链接: https://github.com/AliQTank/Etch-a-Sketch/tree/Op002

由多个 div 创建的网格，随着事件监听器鼠标悬停而改变颜色，因此我将容器背景颜色设置为黑色，以将触发的每个事件监听器的不透明度级别降低 10%，并且在 10 个事件之后，颜色必须完全透明。 有人将一种解决方案应用于按钮，但在我的项目中不起作用，因为如果我在一个单元格(div)中触发了不透明度，其他单元格将从最后一个不透明度值触发，最后一个单元格从不透明度 1 触发到 0.8 其他从 1 到 0.7，最后一个从不透明度 1 到不透明度 0

Answer 1

每次除以 10 都会让它很快消失。这对你有用吗？

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>