Array

To store multiple values in a single variable, use an array. Example of making an empty array and adding three items to it: 
let fruits = []

fruits.push(`apple`)
fruits.push(`orange`)
fruits.push(`banana`)
Items can be accessed by their index numbers, which start at 0. Example of getting the first item from the array: 
fruits[0]
Example of getting the size of the array: 
fruits.length

Exercise 1 of 6

Add the text box value to the array when the button is clicked.

HTML

<input type="text" placeholder="word" value="hello" id="wordInput">
<button id="wordButton">Add word</button>
<p id="wordsParagraph"></p>

JavaScript

let wordInput = document.getElementById(`wordInput`)
let wordButton = document.getElementById(`wordButton`)
let wordsParagraph = document.getElementById(`wordsParagraph`)

let words = []

wordButton.addEventListener(`click`, addWord)

function addWord() {
  // your code will appear here
  wordsParagraph.innerHTML = words
}

Your code

Test your code

Exercise 2 of 6

Add the number to the array when the button is clicked.

HTML

<button id="numberButton">Add number</button>
<p id="numbersParagraph"></p>

JavaScript

let numberButton = document.getElementById(`numberButton`)
let numbersParagraph = document.getElementById(`numbersParagraph`)

let number = 0
let numbers = []

numberButton.addEventListener(`click`, addNumber)

function addNumber() {
  number = number + 1
  // your code will appear here
  numbersParagraph.innerHTML = numbers
}

Your code

Test your code

Exercise 3 of 6

Add the random number to the array when the button is clicked.

HTML

<button id="randomNumberButton">Add random number</button>
<p id="randomNumbersParagraph"></p>

JavaScript

let randomNumberButton = document.getElementById(`randomNumberButton`)
let randomNumbersParagraph = document.getElementById(`randomNumbersParagraph`)

let randomNumbers = []

randomNumberButton.addEventListener(`click`, addRandomNumber)

function addRandomNumber() {
  let randomNumber = Math.floor(Math.random() * 10)
  // your code will appear here
  randomNumbersParagraph.innerHTML = randomNumbers
}

Your code

Test your code

Exercise 4 of 6

Show the first word in the array when the button is clicked.

HTML

<button id="firstWordButton">Show first word</button>
<p id="firstWordParagraph"></p>

JavaScript

let firstWordButton = document.getElementById(`firstWordButton`)
let firstWordParagraph = document.getElementById(`firstWordParagraph`)

let words = [`first`, `second`, `third`]

firstWordButton.addEventListener(`click`, showFirstWord)

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

Your code

Test your code

Exercise 5 of 6

Show the third word in the array when the button is clicked.

HTML

<button id="thirdWordButton">Show third word</button>
<p id="thirdWordParagraph"></p>

JavaScript

let thirdWordButton = document.getElementById(`thirdWordButton`)
let thirdWordParagraph = document.getElementById(`thirdWordParagraph`)

let words = [`first`, `second`, `third`]

thirdWordButton.addEventListener(`click`, showThirdWord)

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

Your code

Test your code

Exercise 6 of 6

Show a random word in the array when the button is clicked.

HTML

<button id="randomWordButton">Show random word</button>
<p id="randomWordParagraph"></p>

JavaScript

let randomWordButton = document.getElementById(`randomWordButton`)
let randomWordParagraph = document.getElementById(`randomWordParagraph`)

let words = [`first`, `second`, `third`]

randomWordButton.addEventListener(`click`, showRandomWord)

function showRandomWord() {
  let randomNumber = Math.floor(Math.random() * words.length)
  // your code will appear here
}

Your code

Test your code

Last section Next section