0

I have a section of code that adds a class to a button if clicked and takes the class off if another button is clicked and adds that class specifically to that button.

specificButtons.forEach(button => {
    button.addEventListener('click', ()=> {
        const innerDiv = button.childNodes[1];

        (document.querySelector('.inner-button')) ? document.querySelector('.inner-button').classList.remove('inner-button') : '';
        innerDiv.classList.add('inner-button');
    });

    button.addEventListener('click', ()=> {
        pledgeOffers.forEach(offer => {
            console.log(offer);
        });
    });
});

I specifically took this line of code from a website and added my own classes and it works great with my project, however i'm not sure what it does and would like to understand what it's doing and why it's doing it. I tried many different If statements to get the code to work and nothing worked until I found this line. Could someone please help explain.

(document.querySelector('.inner-button')) ? document.querySelector('.inner-button').classList.remove('inner-button') : '';
jaclem12
  • 1
  • It's abuse of the ternary statement. IMO, this is cleaner and shorter... `document.querySelector(".inner-button")?.classList.remove("inner-button")` – Phil Dec 03 '21 at 04:56

1 Answers1

1

exp ? exp1 : exp2; means if exp is true it will jump to exp1, otherwise exp2.
You can get more informantion from Conditional (ternary) operator

HolaPz
  • 106
  • 3