Getting Attribute
To get the attribute of an element in JavaScript, simply use the
attribute name. Example of getting the ID of an element:
this.id
Setting an attribute is similar. Example of setting the placeholder of
an element:
this.placeholder = `eat your vegetables`
Exercise 1 of 6
Show the ID of the clicked button in the paragraph.
HTML
<button id="button1">Button 1</button> <button id="button2">Button 2</button> <button id="button3">Button 3</button> <p id="idParagraph"></p>
JavaScript
let button1 = document.getElementById(`button1`)
let button2 = document.getElementById(`button2`)
let button3 = document.getElementById(`button3`)
let idParagraph = document.getElementById(`idParagraph`)
button1.addEventListener(`click`, showId)
button2.addEventListener(`click`, showId)
button3.addEventListener(`click`, showId)
function showId() {
// your code will appear here
}
Your code
Test your code
Exercise 2 of 6
Show the placeholder of the focused text box in the paragraph.
HTML
<input type="text" placeholder="person" id="textBox1"></input> <input type="text" placeholder="place" id="textBox2"></input> <input type="text" placeholder="thing" id="textBox3"></input> <p id="placeholderParagraph"></p>
JavaScript
let textBox1 = document.getElementById(`textBox1`)
let textBox2 = document.getElementById(`textBox2`)
let textBox3 = document.getElementById(`textBox3`)
let placeholderParagraph = document.getElementById(`placeholderParagraph`)
textBox1.addEventListener(`focus`, showPlaceholder)
textBox2.addEventListener(`focus`, showPlaceholder)
textBox3.addEventListener(`focus`, showPlaceholder)
function showPlaceholder() {
// your code will appear here
}
Your code
Test your code
Exercise 3 of 6
Show the src of the clicked image in the paragraph.
HTML
<img src="/img/cat.png" id="image1"> <img src="/img/dog.png" id="image2"> <img src="/img/wolf.png" id="image3"> <p id="srcParagraph"></p>
JavaScript
let image1 = document.getElementById(`image1`)
let image2 = document.getElementById(`image2`)
let image3 = document.getElementById(`image3`)
let srcParagraph = document.getElementById(`srcParagraph`)
image1.addEventListener(`click`, showSrc)
image2.addEventListener(`click`, showSrc)
image3.addEventListener(`click`, showSrc)
function showSrc() {
// your code will appear here
}
Your code
Test your code
Exercise 4 of 6
Change each text box's placeholder when focused.
HTML
<input type="text" placeholder="person" id="person"></input> <input type="text" placeholder="place" id="place"></input> <input type="text" placeholder="thing" id="thing"></input>
JavaScript
let person = document.getElementById(`person`)
let place = document.getElementById(`place`)
let thing = document.getElementById(`thing`)
person.addEventListener(`focus`, changePlaceholder)
place.addEventListener(`focus`, changePlaceholder)
thing.addEventListener(`focus`, changePlaceholder)
function changePlaceholder() {
// your code will appear here
}
Your code
Test your code
Exercise 5 of 6
Change each text box's type to `range` when focused.
HTML
<input type="text" placeholder="red" id="red"></input> <input type="text" placeholder="green" id="green"></input> <input type="text" placeholder="blue" id="blue"></input>
JavaScript
let red = document.getElementById(`red`)
let green = document.getElementById(`green`)
let blue = document.getElementById(`blue`)
red.addEventListener(`focus`, changeType)
green.addEventListener(`focus`, changeType)
blue.addEventListener(`focus`, changeType)
function changeType() {
// your code will appear here
}
Your code
Test your code
Exercise 6 of 6
Change each image's src to the wolf's src when clicked.
HTML
<img src="/img/cat.png" id="cat"> <img src="/img/dog.png" id="dog"> <img src="/img/wolf.png" id="wolf">
JavaScript
let cat = document.getElementById(`cat`)
let dog = document.getElementById(`dog`)
let wolf = document.getElementById(`wolf`)
cat.addEventListener(`click`, changeSrc)
dog.addEventListener(`click`, changeSrc)
wolf.addEventListener(`click`, changeSrc)
function changeSrc() {
// your code will appear here
}
Your code
Test your code