Event Listener
To do the exercises below, use the code from the JavaScript section:
myButton.addEventListener(`click`, doSomething)
Change myButton to the variable highlighted in the exercise. Change
doSomething to the function highlighted in the exercise. If done right,
clicking the thing in question will make a message appear.
Exercise 1 of 6
Add a click event listener to the button.
For typing backticks, refer to number 1 in this
keyboard diagram.
HTML
<button id="greetingButton">Say greeting</button> <p id="greetingParagraph"></p>
JavaScript
let greetingButton = document.getElementById(`greetingButton`)
let greetingParagraph = document.getElementById(`greetingParagraph`)
// your code will appear here
function sayGreeting() {
greetingParagraph.innerHTML = `Welcome to the first exercise set`
}
Your code
Test your code
Exercise 2 of 6
Add a click event listener to the button.
HTML
<button id="jokeButton">Tell joke</button> <p id="jokeParagraph"></p>
JavaScript
let jokeButton = document.getElementById(`jokeButton`)
let jokeParagraph = document.getElementById(`jokeParagraph`)
// your code will appear here
function tellJoke() {
jokeParagraph.innerHTML = `What do you call 2000 mockingbirds?`
}
Your code
Test your code
Exercise 3 of 6
Add a click event listener to the button.
HTML
<button id="answerButton">Show answer</button> <p id="answerParagraph"></p>
JavaScript
let answerButton = document.getElementById(`answerButton`)
let answerParagraph = document.getElementById(`answerParagraph`)
// your code will appear here
function showAnswer() {
answerParagraph.innerHTML = `Two kilo mockingbird`
}
Your code
Test your code
Exercise 4 of 6
Add a click event listener to the paragraph.
HTML
<p id="textParagraph">Click me</p>
JavaScript
let textParagraph = document.getElementById(`textParagraph`)
// your code will appear here
function changeText() {
textParagraph.innerHTML = `Good job!`
}
Your code
Test your code
Click me
Exercise 5 of 6
Add a click event listener to the cat.
HTML
<img src="/img/cat.png" id="cat"> <p id="catParagraph"></p>
JavaScript
let cat = document.getElementById(`cat`)
let catParagraph = document.getElementById(`catParagraph`)
// your code will appear here
function makeCatSound() {
catParagraph.innerHTML = `Meow`
}
Your code
Test your code
Exercise 6 of 6
Add a click event listener to the dog.
HTML
<img src="/img/dog.png" id="dog"> <p id="dogParagraph"></p>
JavaScript
let dog = document.getElementById(`dog`)
let dogParagraph = document.getElementById(`dogParagraph`)
// your code will appear here
function makeDogSound() {
dogParagraph.innerHTML = `Woof`
}
Your code
Test your code
