Debugging

Challenge 2

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

Challenge 2

Reward: 2 points

Why doesn't clicking the button change the box color?

HTML

<button id="colorButton">Change box color</button>
<div id="box"></div>

JavaScript

let colorButton = document.getElementById(`colorButton`)
let box = document.getElementById(`box`)

colorButton.addEventListener(`click`, changeBoxColor)

function changeBoxColor() {
  box.innerHTML = `yellow`
}

Reason

Why doesn't clicking the button change the box color?

HTML

<button id="colorButton">Change box color</button>
<div id="box"></div>

JavaScript

let colorButton = document.getElementById(`colorButton`)
let box = document.getElementById(`box`)

colorButton.addEventListener(`click`, changeBoxColor)

function changeBoxColor() {
  box.backgroundColor = `yellow`
}

Reason

Why doesn't moving the slider resize the dog?

HTML

<input type="range" min="100" max="400" value="400" id="slider">
<img src="dog.png" id="dog">

JavaScript

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

slider.addEventListener(`input`, resizeDog)

function resizeDog() {
  dog.style.width = `slider.valuepx`
}

Reason

Why doesn't moving the slider resize the dog?

HTML

<input type="range" min="100" max="400" value="400" id="slider">
<img src="dog.png" id="dog">

JavaScript

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

slider.addEventListener(`input`, resizeDog)

function resizeDog() {
  dog.style.width = `${slider.value}`
}

Reason

Why doesn't moving the slider resize the dog?

HTML

<input type="range" min="100" max="400" value="400" id="slider">
<img src="dog.png" id="dog">

JavaScript

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

slider.addEventListener(`input`, resizeDog)

function resizeDog() {
  dog.style.width = `${slider}px`
}

Reason

Last challenge Next challenge