Exercise Set 3

Exercise 1 of 6

Make a variable called age, and set it to your age. If you're having trouble, rewatch the variable video.

HTML

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

JavaScript

var showAgeButton = document.getElementById("showAgeButton");
var ageParagraph = document.getElementById("ageParagraph");

// your code will appear here

showAgeButton.addEventListener("click", showAge);

function showAge() {
  ageParagraph.innerHTML = "I am " + age + " years old";
}

You must be signed in to type your code.

Exercise 2 of 6

Make a variable called firstName, and set it to your first name.

HTML

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

JavaScript

var showNameButton = document.getElementById("showNameButton");
var nameParagraph = document.getElementById("nameParagraph");

// your code will appear here

showNameButton.addEventListener("click", showName);

function showName() {
  nameParagraph.innerHTML = "My name is " + firstName;
}

You must be signed in to type your code.

Exercise 3 of 6

Set the color variable to a color when the set color button is clicked.

HTML

<button id="setColorButton">Set color</button>
<button id="applyColorButton">Apply color</button>
<p id="colorParagraph">Color set: none</p>

JavaScript

var setColorButton = document.getElementById("setColorButton");
var applyColorButton = document.getElementById("applyColorButton");
var colorParagraph = document.getElementById("colorParagraph");

var color;

setColorButton.addEventListener("click", setColor);
applyColorButton.addEventListener("click", applyColor);

function setColor() {
  // your code will appear here
  colorParagraph.innerHTML = "Color set: " + color;
}

function applyColor() {
  applyColorButton.style.backgroundColor = color;
}

You must be signed in to type your code.

Exercise 4 of 6

Set the width variable to a number when the set width button is clicked.

HTML

<button id="setWidthButton">Set width</button>
<button id="applyWidthButton">Apply width</button>
<p id="widthParagraph">Width set: none</p>

JavaScript

var setWidthButton = document.getElementById("setWidthButton");
var applyWidthButton = document.getElementById("applyWidthButton");
var widthParagraph = document.getElementById("widthParagraph");

var width;

setWidthButton.addEventListener("click", setWidth);
applyWidthButton.addEventListener("click", applyWidth);

function setWidth() {
  // your code will appear here
  widthParagraph.innerHTML = "Width set: " + width;
}

function applyWidth() {
  applyWidthButton.style.width = width + "px";
}

You must be signed in to type your code.

Exercise 5 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>

JavaScript

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

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

function changeColor() {
  // the keyword this refers to the button that was clicked
  this.style.backgroundColor = "yellow";
}

You must be signed in to type your code.

Exercise 6 of 6

Change the button's background color when the buttons are clicked. See the previous exercise.

HTML

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

JavaScript

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

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

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

You must be signed in to type your code.

Last section Next section