This
To access the element that received the event in an event listener
function, use the keyword
this. Example of setting the
background color of the button that was clicked:
this.style.backgroundColor = `yellow`
Exercise 1 of 6
Change each button's background color when clicked.
Use the
background-color
style.
HTML
<button id="colorButton1">Button 1</button> <button id="colorButton2">Button 2</button> <button id="colorButton3">Button 3</button>
JavaScript
let colorButton1 = document.getElementById(`colorButton1`)
let colorButton2 = document.getElementById(`colorButton2`)
let colorButton3 = document.getElementById(`colorButton3`)
colorButton1.addEventListener(`click`, changeColor)
colorButton2.addEventListener(`click`, changeColor)
colorButton3.addEventListener(`click`, changeColor)
function changeColor() {
// your code will appear here
}
Your code
Test your code
Exercise 2 of 6
Change each button's width when clicked.
Use the
width
style.
HTML
<button id="widthButton1">Button 1</button> <button id="widthButton2">Button 2</button> <button id="widthButton3">Button 3</button>
JavaScript
let widthButton1 = document.getElementById(`widthButton1`)
let widthButton2 = document.getElementById(`widthButton2`)
let widthButton3 = document.getElementById(`widthButton3`)
widthButton1.addEventListener(`click`, changeWidth)
widthButton2.addEventListener(`click`, changeWidth)
widthButton3.addEventListener(`click`, changeWidth)
function changeWidth() {
// your code will appear here
}
Your code
Test your code
Exercise 3 of 6
Change each button's text to `on` when clicked.
HTML
<button id="button1">off</button> <button id="button2">off</button> <button id="button3">off</button>
JavaScript
let button1 = document.getElementById(`button1`)
let button2 = document.getElementById(`button2`)
let button3 = document.getElementById(`button3`)
button1.addEventListener(`click`, changeText)
button2.addEventListener(`click`, changeText)
button3.addEventListener(`click`, changeText)
function changeText() {
// your code will appear here
}
Your code
Test your code
Exercise 4 of 6
Erase each paragraph when clicked.
HTML
<p id="paragraph1">Erase me</p> <p id="paragraph2">Erase me</p> <p id="paragraph3">Erase me</p>
JavaScript
let paragraph1 = document.getElementById(`paragraph1`)
let paragraph2 = document.getElementById(`paragraph2`)
let paragraph3 = document.getElementById(`paragraph3`)
paragraph1.addEventListener(`click`, eraseText)
paragraph2.addEventListener(`click`, eraseText)
paragraph3.addEventListener(`click`, eraseText)
function eraseText() {
// your code will appear here
}
Your code
Test your code
Paragraph 1
Paragraph 2
Paragraph 3
Exercise 5 of 6
Change each image's opacity when clicked.
Use the
opacity
style.
HTML
<img src="/img/cat.png" id="opacityImage1"> <img src="/img/dog.png" id="opacityImage2"> <img src="/img/wolf.png" id="opacityImage3">
JavaScript
let opacityImage1 = document.getElementById(`opacityImage1`)
let opacityImage2 = document.getElementById(`opacityImage2`)
let opacityImage3 = document.getElementById(`opacityImage3`)
opacityImage1.addEventListener(`click`, changeImageOpacity)
opacityImage2.addEventListener(`click`, changeImageOpacity)
opacityImage3.addEventListener(`click`, changeImageOpacity)
function changeImageOpacity() {
// your code will appear here
}
Your code
Test your code
Exercise 6 of 6
Change each image's rotation when clicked.
Use the
transform
style.
HTML
<img src="/img/cat.png" id="rotationImage1"> <img src="/img/dog.png" id="rotationImage2"> <img src="/img/wolf.png" id="rotationImage3">
JavaScript
let rotationImage1 = document.getElementById(`rotationImage1`)
let rotationImage2 = document.getElementById(`rotationImage2`)
let rotationImage3 = document.getElementById(`rotationImage3`)
rotationImage1.addEventListener(`click`, changeImageRotation)
rotationImage2.addEventListener(`click`, changeImageRotation)
rotationImage3.addEventListener(`click`, changeImageRotation)
function changeImageRotation() {
// your code will appear here
}
Your code
Test your code