JavaScript

Browser Events

<h2 class="all-headings">No control over when this text changed!</h2>
<h2 class="all-headings">Complete control over when this text changes</h2>
<button value="xx-large">Large Text</button>
<button value="large">Normal Text</button>
<button value="xx-small">Small Text</button>

let unControlledHeading = document.querySelectorAll(".all-headings")[0];
unControlledHeading.style.fontSize = "xx-small";

let controlledHeading = document.querySelectorAll(".all-headings")[1];

let allButtons = document.querySelectorAll("button");
for (let button of allButtons) {
  button.addEventListener("click", handleClick);
}
function handleClick(event) {
  controlledHeading.style.fontSize = event.target.value;
}