For Loop

To run code over and over again, use a for loop. Example of showing the numbers 0 through 9: 
for (let i = 0; i < 10; i = i + 1) {
  console.log(i)
}
The first part let i = 0 is called the initialization, which runs just once at the start.
The second part i < 10 is called the condition. The loop continues to run as long as the condition is true.
The third part i = i + 1 is called the iteration, which runs each time at the end of the loop.

Exercise 1 of 6

Write the initialization to show the numbers 0 through 9.

HTML

<button id="zeroNineButton">Show numbers 0 through 9</button>
<p id="zeroNineParagraph">Numbers:</p>

JavaScript

let zeroNineButton = document.getElementById(`zeroNineButton`)
let zeroNineParagraph = document.getElementById(`zeroNineParagraph`)

zeroNineButton.addEventListener(`click`, showZeroNine);

function showZeroNine() {
  for (// your code will appear here; i < 10; i = i + 1) {
    zeroNineParagraph.innerHTML = `${zeroNineParagraph.innerHTML} ${i}`
  }
}

Your code

Test your code

Numbers:

Exercise 2 of 6

Write the initialization to show the numbers 10 through 19.

HTML

<button id="tenNineteenButton">Show numbers 10 through 19</button>
<p id="tenNineteenParagraph">Numbers:</p>

JavaScript

let tenNineteenButton = document.getElementById(`tenNineteenButton`)
var tenNineteenParagraph = document.getElementById(`tenNineteenParagraph`)

tenNineteenButton.addEventListener(`click`, showTenNineteen)

function showTenNineteen() {
  for (// your code will appear here; i < 20; i = i + 1) {
    tenNineteenParagraph.innerHTML = `${tenNineteenParagraph.innerHTML} ${i}`
  }
}

Your code

Test your code

Numbers:

Exercise 3 of 6

Write the condition to say hello 3 times.

HTML

<button id="helloButton">Say hello 3 times</button>
<p id="helloParagraph">Words:</p>

JavaScript

let helloButton = document.getElementById(`helloButton`)
let helloParagraph = document.getElementById(`helloParagraph`)

helloButton.addEventListener(`click`, sayHello)

function sayHello() {
  for (let i = 0; // your code will appear here; i = i + 1) {
    helloParagraph.innerHTML = `${helloParagraph.innerHTML} hello`
  }
}

Your code

Test your code

Words:

Exercise 4 of 6

Write the condition to show the numbers 0 through 9 in reverse order.

HTML

<button id="reverseButton">Show numbers 0 through 9 in reverse</button>
<p id="reverseParagraph">Numbers:</p>

JavaScript

let reverseButton = document.getElementById(`reverseButton`)
let reverseParagraph = document.getElementById(`reverseParagraph`)

reverseButton.addEventListener(`click`, showReverse)

function showReverse() {
  for (let i = 9; // your code will appear here; i = i - 1) {
    reverseParagraph.innerHTML = `${reverseParagraph.innerHTML} ${i}`
  }
}

Your code

Test your code

Numbers:

Exercise 5 of 6

Write the iteration to show the even numbers between 0 and 19.

HTML

<button id="evenButton">Show even numbers between 0 and 19</button>
<p id="evenParagraph">Numbers:</p>

JavaScript

let evenButton = document.getElementById(`evenButton`)
let evenParagraph = document.getElementById(`evenParagraph`)

evenButton.addEventListener(`click`, showEven)

function showEven() {
  for (let i = 0; i < 20; // your code will appear here) {
    evenParagraph.innerHTML = `${evenParagraph.innerHTML} ${i}`
  }
}

Your code

Test your code

Numbers:

Exercise 6 of 6

Show the squares of 0 through 9. Refer to this squares table.

HTML

<button id="squaresButton">Show squares of 0 through 9</button>
<p id="squaresParagraph">Squares:</p>

JavaScript

let squaresButton = document.getElementById(`squaresButton`)
let squaresParagraph = document.getElementById(`squaresParagraph`)

squaresButton.addEventListener(`click`, showSquares)

function showSquares() {
  for (let i = 0; i < 10; i = i + 1) {
    // your code will appear here
  }
}

Your code

Test your code

Squares:

Last section Next section