Output

To do the exercises below, use the code from the JavaScript section: 
myParagraph.innerHTML = `hello world`
Change myParagraph to the variable highlighted in the exercise. Fill in the backticks with the appropriate value. If done right, clicking the button will make your text appear.

Exercise 1 of 6

Show your name when the button is clicked.

HTML

<button id="nameButton">Show name</button>
<p id="nameParagraph"></p>

JavaScript

let nameButton = document.getElementById(`nameButton`)
let nameParagraph = document.getElementById(`nameParagraph`)

nameButton.addEventListener(`click`, showName)

function showName() {
  // your code will appear here
}

Your code

Test your code

Exercise 2 of 6

Show your age when the button is clicked.

HTML

<button id="ageButton">Show age</button>
<p id="ageParagraph"></p>

JavaScript

let ageButton = document.getElementById(`ageButton`)
let ageParagraph = document.getElementById(`ageParagraph`)

ageButton.addEventListener(`click`, showAge)

function showAge() {
  // your code will appear here
}

Your code

Test your code

Exercise 3 of 6

Show a message when the button is clicked.

HTML

<button id="messageButton">Show message</button>
<p id="messageParagraph"></p>

JavaScript

let messageButton = document.getElementById(`messageButton`)
let messageParagraph = document.getElementById(`messageParagraph`)

messageButton.addEventListener(`click`, showMessage)

function showMessage() {
  // your code will appear here
}

Your code

Test your code

Exercise 4 of 6

Erase the message when the button is clicked.

HTML

<button id="eraseButton">Erase message</button>
<p id="messageDisplay">Erase me</p>

JavaScript

let eraseButton = document.getElementById(`eraseButton`)
let messageDisplay = document.getElementById(`messageDisplay`)

eraseButton.addEventListener(`click`, eraseMessage)

function eraseMessage() {
  // your code will appear here
}

Your code

Test your code

Erase me

Exercise 5 of 6

Change the button text when clicked.

HTML

<button id="changeButton">Change my text</button>

JavaScript

let changeButton = document.getElementById(`changeButton`)

changeButton.addEventListener(`click`, changeText)

function changeText() {
  // your code will appear here
}

Your code

Test your code

Exercise 6 of 6

Show a message in the box when the button is clicked.

HTML

<button id="boxButton">Show message in box</button>
<div id="box"></div>

JavaScript

let boxButton = document.getElementById(`boxButton`)
let box = document.getElementById(`box`)

boxButton.addEventListener(`click`, showMessageInBox)

function showMessageInBox() {
  // your code will appear here
}

Your code

Test your code

Last section Next section