<p>The lightbulb is <span id="lightbulb">lit</span></p>

<button id="turn-on">Turn on</button>
<button id="turn-off">Turn off</button>
<button id="break">Break</button>
const lightbulb = document.getElementById("lightbulb")

const turnBulbOn = document.getElementById("turn-on")
const turnBulbOff = document.getElementById("turn-off")
const breakBulb = document.getElementById("break")

let isBroken = false

turnBulbOn.addEventListener("click", () => {
  if (!isBroken) {
    lightbulb.innerText = "lit"
  }
})

turnBulbOff.addEventListener("click", () => {
  if (!isBroken) {
    lightbulb.innerText = "unlit"
  }
})

breakBulb.addEventListener("click", () => {
  lightbulb.innerText = "broken"
  isBroken = true
})
Run Pen

External CSS

  1. https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css

External JavaScript

This Pen doesn't use any external JavaScript resources.