How to create a function that incrementally reduces opacity of 2 lines every time a button is clicked

Question

I am new to coding and I am trying to create a function that incrementally reduces the opacity of 2 lines every time a button is clicked (similar to a staircase design). This is the function that I have so far:

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

The above function changes the opacity of two lines (#color_right) and (#color_bottom) from 1 to 0.7. But I need help coming up with a function that will incrementally reduce the opacity say by 0.1 for every time the button is clicked.

All your help is greatly appreciated! Thank you in advance!

Answer 1

You can store the references to both lines in an array, set the default opacity value and then decrease the opacity on every button click:

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>