If Statement

To compare a variable to a value, use an if statement. Example of checking if a variable called age is at least 100: 
if (age >= 100) {
  console.log(`you are very old`)
}
The age >= 100 is a condition. The >= is a comparison operator. For the complete list of comparison operators, refer to the conditional logic page.

Exercise 1 of 6

Write a condition to check if money is at least 10.

HTML

<button id="moneyMessageButton">Show message</button>
<p id="moneyMessageParagraph"></p>

JavaScript

let moneyMessageButton = document.getElementById(`moneyMessageButton`)
let moneyMessageParagraph = document.getElementById(`moneyMessageParagraph`)

let money = 10

moneyMessageButton.addEventListener(`click`, showMoneyMessage)

function showMoneyMessage() {
  if (// your code will appear here) {
    moneyMessageParagraph.innerHTML = `I have at least $10`
  }
}

Your code

Test your code

Exercise 2 of 6

Write a condition to check if score is less than 100.

HTML

<button id="scoreMessageButton">Show message</button>
<p id="scoreMessageParagraph"></p>

JavaScript

let scoreMessageButton = document.getElementById(`scoreMessageButton`)
let scoreMessageParagraph = document.getElementById(`scoreMessageParagraph`)

let score = 99.5

scoreMessageButton.addEventListener(`click`, showScoreMessage)

function showScoreMessage() {
  if (// your code will appear here) {
    scoreMessageParagraph.innerHTML = `My score is less than 100`
  }
}

Your code

Test your code

Exercise 3 of 6

Write a condition to check if points is more than 200.

HTML

<button id="pointsMessageButton">Show message</button>
<p id="pointsMessageParagraph"></p>

JavaScript

let pointsMessageButton = document.getElementById(`pointsMessageButton`)
let pointsMessageParagraph = document.getElementById(`pointsMessageParagraph`)

let points = 200.5

pointsMessageButton.addEventListener(`click`, showPointsMessage)

function showPointsMessage() {
  if (// your code will appear here) {
    pointsMessageParagraph.innerHTML = `I have more than 200 points`
  }
}

Your code

Test your code

Exercise 4 of 6

Write a condition to check if the number is not positive.

HTML

<button id="numberMessageButton">Show message</button>
<p id="numberMessageParagraph"></p>

JavaScript

let numberMessageButton = document.getElementById(`numberMessageButton`)
let numberMessageParagraph = document.getElementById(`numberMessageParagraph`)

let number = 0

numberMessageButton.addEventListener(`click`, showNumberMessage)

function showNumberMessage() {
  if (// your code will appear here) {
    numberMessageParagraph.innerHTML = `The number is not positive`
  }
}

Your code

Test your code

Exercise 5 of 6

Write a condition to check if the text box value is not `please`. Use the value property.

HTML

<input type="text" placeholder="magic word" value="now" id="magicWordInput">
<button id="responseButton">Show response</button>
<p id="responseParagraph"></p>

JavaScript

let magicWordInput = document.getElementById(`magicWordInput`)
let responseButton = document.getElementById(`responseButton`)
let responseParagraph = document.getElementById(`responseParagraph`)

responseButton.addEventListener(`click`, showResponse)

function showResponse() {
  if (// your code will appear here) {
    responseParagraph.innerHTML = `You didn't say the magic word`
  }
}

Your code

Test your code

Exercise 6 of 6

Write a condition to check if the text box value is `James Bond`.

HTML

<input type="text" placeholder="name" value="James Bond" id="nameInput">
<button id="greetingButton">Say greeting</button>
<p id="greetingParagraph"></p>

JavaScript

let nameInput = document.getElementById(`nameInput`)
let greetingButton = document.getElementById(`greetingButton`)
let greetingParagraph = document.getElementById(`greetingParagraph`)

greetingButton.addEventListener(`click`, sayGreeting)

function sayGreeting() {
  if (// your code will appear here) {
    greetingParagraph.innerHTML = `My name is Bond, James Bond`
  }
}

Your code

Test your code

Last section Next section