JavaScript is pretty fun. You don’t need to know much to start playing around with it. Let’s jump in with a Terrible Idea that You Should Never Do.™️

Note: This article is intended for beginners (and kids!), but has plenty of extra tidbits along the way. I’ll be intentionally glossing over most topics, but give you enough info to be dangerous. Read along, and have fun. 🙂

Daddy Eats Fart Popsicles

I asked my son what he’d think was funny to do to my website. He immediately said, “Change that title to ‘Daddy eats fart popsicles.’” So, I opened the Console, and we changed it.

To make it better, we added a way to change any text you clicked turn into “Daddy eats fart popsicles.” He clicked many more times than I would have liked.

This article shows you how to recreate this in a few steps.

Open the Console

Right click on the page to open a menu. Select the option that says “Inspect” or “Inspect Element.” This will open a window with a bunch of HTML and CSS.

At the top of the new window, there’ll be a tab that says “Console.” Click that. Now we’re ready to have some fun with JavaScript.

Set a Variable

A variable is a way of remembering a value. Remember x in algebra? That’s a variable. We’re saying x means this other thing. In JavaScript there are three ways to define a variable, but we’ll just use one for now: var.

Click into the console, then:

• Type or copy/paste var phrase = 'Daddy eats fart popsicles'
• Press Enter to set the value.
• Type phrase
• Press Enter to see it return “Daddy eats fart popsicles”

If you get red error message after you press enter, something isn’t right. Check to make sure you typed everything exactly like in the example. A common issue is not including both single quotes ' around the text. Finding typos is approximately 75% of being a web developer.

When we say var phrase =, we’re saying that phrase is whatever comes after the =. It could be anything. You can also change what the variable equals.

• Because phrase is already defined, we don’t need to type var before phrase. We only need to do that the first time.
• Type or copy/paste phrase = 'My son eats fart popsicles'
• Press Enter to set the value.
• Type phrase
• Press Enter to see it return “My son eats fart popsicles”

Clickity, Click

A webpage is made of a bunch of “elements” that together, form the DOM (I say it like “dawm” or the name “Don” but with an “m” at the end). We’ll make it so any element you click ends up saying whatever phrase equals.

In my son’s case, he reset it back to phrase = 'My daddy eats fart popsicles' 🙈

To make something happen when you click, we add an “Event Listener.” An Event Listener waits around for something to happen. It’s like a racer waiting for the signal to go. In our case, the signal is a click.

Go back to the console, then:

• Type or copy/paste document.addEventListener( 'click', e => e.target.innerHTML = phrase )
• Press Enter
• BE CAREFUL BECAUSE YOU CAN NOW DESTROY THE PAGE (not permanently though, a reload will reset the page).

Pro tip: Press the up arrow key in the console to bring back your last commands, even after reloading the page. After a reset, keep pressing the up arrow until your initial var phrase line shows up. And if nothing is working, reload the page and try again!

I recommend clicking a title, or some content you don’t want to reread. Because after you click it, it isn’t coming back until you reload the page.

Event Listener Code, Explained

Let’s break down document.addEventListener( 'click', e => e.target.innerHTML = phrase ).

• document: The entire page. The DOM we talked about earlier.
• document.addEventListener: Add an event listener to the document. We’re adding it to the document, but we could add a click listener to any element of the page.
• 'click': There are several kinds of event listeners, such as an event when something changes, or when a key is pressed. Our code is saying we want to listen for a click.
• e => e.target.innerHTML = phrase: e means “event.” We’re getting the target of the event (the target is the element that was clicked) and changing its text to whatever phrase equals.

Putting it All Together

If you’re getting stuck or things aren’t working, reload the page, then copy and paste this into the console:

var phrase = 'Daddy eats fart popsicles'

document.addEventListener( 'click', e => e.target.innerHTML = phrase )

A Mandatory Note on Accessibility

Accessibility (or a11y) means letting people interact with your website however they want to.

Maybe that means they have the ability to see and move their arms and hands around. If so, they probably use websites with their eyes to see and a mouse cursor to click on things.

Some people like using a keyboard and pressing the TAB button and arrow keys to move around the website. Some people use a Screen Reader that will read a webpage to them.

Either way, it doesn’t matter how a person interacts with your website. That’s for them to decide. But what you need to do is make sure people can interact with your website however they choose to.

That’s exactly what we’ll learn how to do next time.

Part 2 is in the Works

Subscribe to my email list below or follow me on Twitter to find out when I release Learning via Terrible Ideas: Replacing Text on Click, Part 2.