Using Document.queryselector('.').style. To Change *two* Css Properties Of A Different Div

In follow-up to an earlier question. I have the following script: document.querySelector('.clickme').addEventListener('click', function() { this.style.color = '#f00'; th

Solution 1:

You can use document.querySelector('.zebra') inside click event handler

document.querySelector('.clickme').addEventListener('click', function() {
     this.style.color = '#f00';
     this.style.backgroundColor = '#fff';
     document.querySelector('.zebra').style.color = 'blue';
     document.querySelector('.zebra').style.backgroundColor = 'grey';
 });

document.querySelector('.clickme').addEventListener('click', function() {
     this.style.color = '#f00';
     this.style.backgroundColor = '#fff';
     document.querySelector('.zebra').style.color = 'blue';
     document.querySelector('.zebra').style.backgroundColor = 'grey';
 });

<divclass='clickme'>Click me</div><divclass='zebra'>Zebra</div>

Solution 2:

Locate the other element with document.querySelector(".zebra") and change its color and background color:

document.querySelector('.clickme').addEventListener('click', function() {
    let zebra = document.querySelector('.zebra')
    zebra.style.color = '#f00';
    zebra.style.backgroundColor = '#fff';
});

Hopefully, this helps.