Exercise Set 9

Exercise 1 of 6

Write the condition to show every number in the array. Refer to the arrays and loops page.

HTML

<button id="showNumbersButton">Show numbers</button>
<p id="numbersParagraph">Numbers:</p>

JavaScript

var showNumbersButton = document.getElementById("showNumbersButton");
var numbersParagraph = document.getElementById("numbersParagraph");

var numbers = [1, 1, 2, 3, 5];

showNumbersButton.addEventListener("click", showNumbers);

function showNumbers() {
  for (var i = 0; // your code will appear here; i++) {
    numbersParagraph.innerHTML = numbersParagraph.innerHTML + " " + numbers[i];
  }
}

You must be signed in to type your code.

Exercise 2 of 6

Show every word in the array with a space between each word.

HTML

<button id="showWordsButton">Show words</button>
<p id="wordsParagraph">Words:</p>

JavaScript

var showWordsButton = document.getElementById("showWordsButton");
var wordsParagraph = document.getElementById("wordsParagraph");

var words = ["one", "two", "three", "four", "five"];

showWordsButton.addEventListener("click", showWords);

function showWords() {
  for (var i = 0; i < words.length; i++) {
    // your code will appear here
  }
}

You must be signed in to type your code.

Exercise 3 of 6

Show the sum of the numbers in the array.

HTML

<button id="showSumButton">Show sum</button>
<p id="sumParagraph">Sum:</p>

JavaScript

var showSumButton = document.getElementById("showSumButton");
var sumParagraph = document.getElementById("sumParagraph");

var numbersToSum = [1, 2, 3, 4, 5];

showSumButton.addEventListener("click", showSum);

function showSum() {
  var sum = 0;

  for (var i = 0; i < numbersToSum.length; i++) {
    // your code will appear here
  }

  sumParagraph.innerHTML = "Sum: " + sum;
}

You must be signed in to type your code.

Exercise 4 of 6

Write a condition to show every positive number in the array.

HTML

<button id="showNumbersButton">Show positive numbers</button>
<p id="numbersParagraph">Numbers:</p>

JavaScript

var showPositiveNumbersButton = document.getElementById("showPositiveNumbersButton");
var positiveNumbersParagraph = document.getElementById("positiveNumbersParagraph");

var numbersToFindPositive = [5, -2, 0, 3, -7];

showPositiveNumbersButton.addEventListener("click", showPositiveNumbers);

function showPositiveNumbers() {
  for (var i = 0; i < numbersToFindPositive.length; i++) {
    if (// your code will appear here) {
      positiveNumbersParagraph.innerHTML = positiveNumbersParagraph.innerHTML + " " + numbersToFindPositive[i];
    }
  }
}

You must be signed in to type your code.

Exercise 5 of 6

Watch the getting elements video. Make a single variable for all of the buttons.

HTML

<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<p id="buttonTextParagraph"></p>

JavaScript

// your code will appear here
var buttonTextParagraph = document.getElementById("buttonTextParagraph");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", showButtonText);
}

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 6 of 6

Add a click event listener to all of the buttons.

HTML

<button class="bt">Button 1</button>
<button class="bt">Button 2</button>
<button class="bt">Button 3</button>

CSS

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

JavaScript

var allButtons = document.querySelectorAll(".bt");

for (var i = 0; i < allButtons.length; i++) {
  // your code will appear here
}

function toggleButton() {
  // toggles the "selected" class for the button that was clicked
  this.classList.toggle("selected");
}

You must be signed in to type your code.