Simplest way to toggle functionality in vanilla JS

Question

Anyways I'm trying to make a lightbulb. It's just a circle, I have an onclick event on a button, and the event function toggled a class, changing the color. But I want the text in the button to toggle as well when that class is activated.

I finally made it work as I was writing this question. But it still isn't working how I want it. I only want to have one if statement.

I only want to solve it this specific way, by checking if a class is activated, and if yes, then change the text content of the button, if not, then leave it how it is.

 let bulb = document.getElementById("light"); let lightSwitch = document.getElementById("switch"); function activity(event) { bulb.classList.toggle("lightOn"); if (bulb.classList.contains("lightOn")) { lightSwitch.textContent = "OFF"; } else if (bulb.classList.contains("lightOff")) { lightSwitch.textContent = "ON"; } }

 .lightOn { background: yellow; }

 <div id="light" class="lightOff"></div> <button id="switch" onclick="activity()">ON</button>

How can I write it with only one if statement, Also, is there a way easier than this? Just vanilla not jQuery.

Answer 1

like this?

...

function activity(event) {
   bulb.classList.toggle("lightOn");
   lightSwitch.textContent = bulb.classList.contains("lightOn") ? "OFF" : "ON";
}

...

Answer 2

Your code can be simplified by extracting the bulb-specific default styles into a light class, then only toggle a new lightOn class. The default styles describe what to show if the bulb is off, but you can override those styles with !important in the lightOn class. Just like this:

 let bulb = document.getElementById("light"); let lightSwitch = document.getElementById("switch"); lightSwitch.addEventListener('click', function() { bulb.classList.toggle('lightOn'); lightSwitch.textContent = bulb.classList.contains("lightOn")? "OFF": "ON"; });

 .light { width: 100px; height: 100px; border-radius: 100%; background: gray; }.lightOn { background: yellow;important; }

 <div id="light" class="light"></div> <button id="switch">ON</button>

You can also shorten your if-statement into a ternary expression , which is a better choice for this situation because only one value changes.