Exercise Set 6

Exercise 1 of 6

Add a click event listener to the third button.

HTML

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<p id="buttonTextParagraph"></p>

JavaScript

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var buttonTextParagraph = document.getElementById("buttonTextParagraph");

button1.addEventListener("click", showButtonText);
button2.addEventListener("click", showButtonText);
// your code will appear here

function showButtonText() {
  // the keyword this refers to the button that was clicked
  buttonTextParagraph.innerHTML = this.innerHTML;
}

You must be signed in to type your code.

Exercise 2 of 6

Show the button text when the buttons are clicked. Look at the previous exercise.

HTML

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<p id="textParagraph"></p>

JavaScript

var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");
var b3 = document.getElementById("b3");
var textParagraph = document.getElementById("textParagraph");

b1.addEventListener("click", showText);
b2.addEventListener("click", showText);
b3.addEventListener("click", showText);

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

You must be signed in to type your code.

Exercise 3 of 6

Add a click event listener to the third button.

HTML

<button id="bt1">Button 1</button>
<button id="bt2">Button 2</button>
<button id="bt3">Button 3</button>

CSS

/* styles all elements with a "selected" class */
.selected {
  border: 2px solid black;
}

JavaScript

var bt1 = document.getElementById("bt1");
var bt2 = document.getElementById("bt2");
var bt3 = document.getElementById("bt3");

bt1.addEventListener("click", selectButton);
bt2.addEventListener("click", selectButton);
// your code will appear here

function selectButton() {
  // adds a "selected" class to the button that was clicked
  this.classList.add("selected");
}

You must be signed in to type your code.

Exercise 4 of 6

Select the button when the buttons are clicked. Look at the previous exercise.

HTML

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>

CSS

/* styles all elements with a "selected" class */
.selected {
  border: 2px solid black;
}

JavaScript

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.addEventListener("click", select);
btn2.addEventListener("click", select);
btn3.addEventListener("click", select);

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

You must be signed in to type your code.

Exercise 5 of 6

Add a click event listener to the third image.

HTML

<img src="/img/cat.png" id="image1">
<img src="/img/dog.png" id="image2">
<img src="/img/wolf.png" id="image3">
<p id="imageSourceParagraph"></p>

JavaScript

var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var image3 = document.getElementById("image3");
var imageSourceParagraph = document.getElementById("imageSourceParagraph");

image1.addEventListener("click", showImageSource);
image2.addEventListener("click", showImageSource);
// your code will appear here

function showImageSource() {
  // gets the "src" attribute from the image that was clicked
  imageSourceParagraph.innerHTML = this.src;
}

You must be signed in to type your code.

Exercise 6 of 6

Show the image source when the images are clicked. Look at the previous exercise.

HTML

<img src="/img/cat.png" id="img1">
<img src="/img/dog.png" id="img2">
<img src="/img/wolf.png" id="img3">
<p id="imageSourceParagraph"></p>

JavaScript

var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var imgSourceParagraph = document.getElementById("imgSourceParagraph");

img1.addEventListener("click", showImgSource);
img2.addEventListener("click", showImgSource);
img3.addEventListener("click", showImgSource);

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

You must be signed in to type your code.

Last section Next section