Selecting Elements and Handling Events

Query the DOM, bind events, and update visible state in one predictable flow.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<div class="counter">
  <button id="decrease" type="button">-</button>
  <output id="value">0</output>
  <button id="increase" type="button">+</button>
</div>

.counter {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
}

const value = document.getElementById("value");
console.log("Events lesson loaded");