Selecting Elements and Handling Events

JavaScript starts with the DOM. In this lesson you will query elements, listen for clicks, and change the page in response. The key is to make the interaction obvious and predictable rather than clever.

Work through a small counter and button pair to understand the flow from event to state change to UI update.

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;
.counter button {
   width: 2.5rem;
   height: 2.5rem;  
   border-radius: 999px;
   border: 1px solid #cfcfcf;
   background: #fff;
}
.counter output {
   min-width: 3rem;  
   text-align: center;  
   font-size: 1.5rem;  
   font-weight: 700;

const value = document.getElementById("value");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");
let count = 0;
function render() {
value.textContent = String(count);
}
increase.addEventListener("click", () => {
  count += 1;  
  render();
});
decrease.addEventListener("click", () => {  
 count -= 1;  render();

});render();