JavaScript Interaction for Beginners

Variables and selection

const names a value you do not reassign. querySelector finds the first matching element.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

const message = document.querySelector("#message");
const chapter = "A curious beginning";
message.textContent = chapter;

Edit JAVASCRIPT

Try this → Change the selected element, class or displayed text, then click Try it.

Events and text

addEventListener waits for an event. A native button handles keyboard activation too.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

const button = document.querySelector("#trigger");
const message = document.querySelector("#message");
button.addEventListener("click", () => {
  message.textContent = "Curiouser and curiouser!";
});

Edit JAVASCRIPT

Try this → Change the selected element, class or displayed text, then click Try it.

Adding a class

JavaScript changes state; CSS defines its appearance.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

document.querySelector("#trigger").addEventListener("click", () => {
  document.querySelector("#message").classList.add("highlight");
});

Edit JAVASCRIPT

Try this → Change the selected element, class or displayed text, then click Try it.

Removing a class

Start with a class, then remove it on click.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

const message = document.querySelector("#message");
message.classList.add("highlight");
document.querySelector("#trigger").addEventListener("click", () => {
  message.classList.remove("highlight");
});

Edit JAVASCRIPT

Try this → Change the selected element, class or displayed text, then click Try it.

Toggling a class

toggle adds a missing class or removes an existing one.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

document.querySelector("#trigger").addEventListener("click", () => {
  document.querySelector("#message").classList.toggle("highlight");
});

Edit JAVASCRIPT

Try this → Change the selected element, class or displayed text, then click Try it.

Showing and hiding

The hidden property controls whether an element is displayed.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

document.querySelector("#trigger").addEventListener("click", () => {
  const message = document.querySelector("#message");
  message.hidden = !message.hidden;
});

Edit JAVASCRIPT

Try this → Change the selected element, class or displayed text, then click Try it.

Triggering an animation

Remove the class and allow two frames before restoring it to restart the same animation.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

const message = document.querySelector("#message");
document.querySelector("#trigger").addEventListener("click", () => {
  message.classList.remove("enter");
  requestAnimationFrame(() => {
    requestAnimationFrame(() => message.classList.add("enter"));
  });
});

Edit JAVASCRIPT

Try this → Change the selected element, class or displayed text, then click Try it.