Как создать функцию, которая постепенно уменьшает непрозрачность на 2 строки при каждом нажатии кнопки

Question

Я новичок в кодировании и пытаюсь создать функцию, которая постепенно уменьшает непрозрачность на 2 строки при каждом нажатии кнопки (аналогично дизайну лестницы). Это функция, которую я имею до сих пор:

this.options.events['click button'] = function() {
  document.querySelector('#color_bottom').style.opacity = 0.7
  document.querySelector('#color_right').style.opacity = 0.7
};

Приведенная выше функция изменяет непрозрачность двух строк (#color_right) и (#color_bottom) с 1 на 0,7. Но мне нужна помощь, чтобы придумать функцию, которая будет постепенно уменьшать непрозрачность, скажем, на 0,1 при каждом нажатии кнопки.

Вся ваша помощь очень ценится! Заранее спасибо!

Answer 1

Вы можете поддерживать одну глобальную переменную с начальным значением 1. При нажатии на кнопку каждый раз уменьшайте эту переменную на 0.1.

Демо:

let start = 1;
function increaseOpacity() {
  start -= 0.1;
  document.querySelector('#color_bottom').style.opacity = start;
  document.querySelector('#color_right').style.opacity = start;
};

<button type="button" onclick="increaseOpacity()">Decrease</button>
<div id="color_bottom">color_bottom</div>
<div id="color_right">color_right</div>

Answer 2

const button = document.querySelector('.example');
let opacity = 1;

button.addEventListener('click', function() {
	opacity -= 0.2;
	this.style.opacity = opacity;
});

.example {
    background-color:blue;
    border: none;
    padding: 10px 20px;
}

<button class="example">Button</button>

Answer 3

Вы можете сохранить ссылки на обе строки в массиве, установить значение непрозрачности по умолчанию, а затем уменьшить непрозрачность при каждом нажатии кнопки:

const step = 0.1

const lines = ['color_bottom', 'color_right']
    .map(id => document.getElementById(id))
    .map(el => {
        el.style.opacity = 1
        return el
    });

document.getElementsByTagName('button')[0].addEventListener('click', () => {
    lines.forEach(line => {
        line.style.opacity -= step
    })
});

<p id="color_bottom">Line 1</p>
<p id="color_right">Line 2</p>
<button>Reduce Opacity</button>

Answer 4

Вы можете уменьшить значение атрибута stroke-opacity строк:

let lines = document.querySelectorAll("line");
let so = 1;//the initial stroke opacity is set to 1
theButton.addEventListener("click",()=>{
  if(so > 0){so -=.1;// if the stroke opacity is greater than 1 decrease it
  lines.forEach(l=>{// reset the stroke-opacity attribute of the lines
    l.setAttributeNS(null,"stroke-opacity",so)
  })
  }
})

line{stroke:black}
svg{border:1px solid; stroke-width:5; width:90vh;}

<p><button id="theButton">theButton</button></p>
<svg viewBox="0 0 100 100" >
  <line x1="10" y1="90" x2="85" y2="90" stroke-opacity="1" />
  <line y1="10" x1="90" y2="85" x2="90" stroke-opacity="1" />
  
</svg>

Answer 5

Просто маленький пример. Вы можете изменить логику, как вам нужно.

const sub = 0.1;
var main = 1;
this.options.events['click button'] = function() {
    if (main > 0) {
        document.querySelector('#color_bottom').style.opacity = main - sub;
        document.querySelector('#color_right').style.opacity = main - sub;
    } else {
        main = 1;
    }
};