First events versions

Simple version

First get ahold of the element representing the message box.

const msg = document.querySelector('#message');

Then create an event handler for one of the colored boxes:

document.querySelector('#red').onclick = (e) => {
  msg.innerText = 'Red';
  msg.style.color = 'red';
};

More event handlers

Make event handlers for the other two boxes

document.querySelector('#red').onclick = (e) => {
  msg.innerText = 'Red';
  msg.style.color = 'red';
};

document.querySelector('#green').onclick = (e) => {
  msg.innerText = 'Green';
  msg.style.color = 'green';
};

document.querySelector('#blue').onclick = (e) => {
  msg.innerText = 'Blue';
  msg.style.color = 'blue';
};

These three handlers all look pretty similar

Can we find a way to remove the duplication?

Step 1

First, get the message text from the element that was clicked

document.querySelector('#red').onclick = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = 'red';
};

document.querySelector('#green').onclick = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = 'green';
};

document.querySelector('#blue').onclick = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = 'blue';
};

Step 2

Get the color name from element text

document.querySelector('#red').onclick = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = e.currentTarget.innerText.toLowerCase();
};

document.querySelector('#green').onclick = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = e.currentTarget.innerText.toLowerCase();
};

document.querySelector('#blue').onclick = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = e.currentTarget.innerText.toLowerCase();
};

Make one function

Now that all three functions are the same, make a copy of one and turn it into a named function.

document.querySelector('#red').onclick = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = e.currentTarget.innerText.toLowerCase();
};

becomes

const boxClicked = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = e.currentTarget.innerText.toLowerCase();
};

And use one function for all three boxes

document.querySelector('#red').onclick = boxClicked;
document.querySelector('#green').onclick = boxClicked;
document.querySelector('#blue').onclick = boxClicked;

Could use a variable

e.currentTarget is a bit much to read lo let’s introduce a variable to give it a meaningful name.

const boxClicked = (e) => {
  msg.innerText = e.currentTarget.innerText;
  msg.style.color = e.currentTarget.innerText.toLowerCase();
};

becomes:

const boxClicked = (e) => {
  const box = e.currentTarget;
  msg.innerText = box.innerText;
  msg.style.color = box.innerText.toLowerCase();
};

Complete code

const msg = document.querySelector('#message');

const boxClicked = (e) => {
  const box = e.currentTarget;
  msg.innerText = box.innerText;
  msg.style.color = box.innerText.toLowerCase();
};

document.querySelector('#red').onclick = boxClicked;
document.querySelector('#green').onclick = boxClicked;
document.querySelector('#blue').onclick = boxClicked;

A note

Some of you discovered (maybe by accident) that you can also refer to an element that has an id attribute by a variable with the same name like this:

message.innerText = 'Hello! No querySelector needed!'

That’s a bit of magic that you should not rely on.

Modern style is to explicitly use document.querySelector to get the elements you want to manipulate.