Debugging

Debugging is the process of finding and fixing errors in code. The challenges below require you to find the errors in the code.

Challenge 3

Reward: 2 points
Why doesn't clicking the dog 10 times show a message?

HTML

<img src="dog.png" id="dog">
<p id="messageParagraph"></p>

JavaScript

let dog = document.getElementById(`dog`)
let messageParagraph = document.getElementById(`messageParagraph`)
let clicks = 0

dog.addEventListener(`click`, clickDog)

function clickDog() {
  clicks + 1

  if (clicks == 10) {
    messageParagraph.innerHTML = `woof woof`
  }
}

Reason

Why doesn't clicking the dog 10 times show a message?

HTML

<img src="dog.png" id="dog">
<p id="messageParagraph"></p>

JavaScript

let dog = document.getElementById(`dog`)
let messageParagraph = document.getElementById(`messageParagraph`)
let clicks = 0

dog.addEventListener(`click`, clickDog)

function clickDog() {
  clicks = +1

  if (clicks == 10) {
    messageParagraph.innerHTML = `woof woof`
  }
}

Reason

Why doesn't clicking the dog 10 times show a message?

HTML

<img src="dog.png" id="dog">
<p id="messageParagraph"></p>

JavaScript

let dog = document.getElementById(`dog`)
let messageParagraph = document.getElementById(`messageParagraph`)

dog.addEventListener(`click`, clickDog)

function clickDog() {
  clicks = clicks + 1

  if (clicks == 10) {
    messageParagraph.innerHTML = `woof woof`
  }
}

Reason

Why doesn't clicking the button twice toggle the message?

HTML

<button id="switchButton">Flip switch</button>
<p id="messageParagraph"></p>

JavaScript

let switchButton = document.getElementById(`switchButton`)
let messageParagraph = document.getElementById(`messageParagraph`)
let lightOn = false

switchButton.addEventListener(`click`, flipSwitch)

function flipSwitch() {
  if (lightOn == false) {
    messageParagraph.innerHTML = `The light is now on.`
  }
  else {
    messageParagraph.innerHTML = `The light is now off.`
    lightOn = false
  }
}

Reason

Why doesn't clicking the button twice toggle the message?

HTML

<button id="switchButton">Flip switch</button>
<p id="messageParagraph"></p>

JavaScript

let switchButton = document.getElementById(`switchButton`)
let messageParagraph = document.getElementById(`messageParagraph`)
let lightOn = false

switchButton.addEventListener(`click`, flipSwitch)

function flipSwitch() {
  if (lightOn = false) {
    messageParagraph.innerHTML = `The light is now on.`
    lightOn = true
  }
  else {
    messageParagraph.innerHTML = `The light is now off.`
    lightOn = false
  }
}

Reason

Last challenge Next challenge