Debugging

Debugging is the process of finding and fixing errors in code. The challenges below require you to find the errors in the code. Type your fixes into the text areas. When you are done with a challenge, show your fixes to the instructor.

Challenge 1
Challenge 2
Challenge 3
Challenge 4

Challenge 1

Reward: 1 point

Why doesn't clicking the button show a story?

HTML

<button id="showStory">Show story</button>
<p id="story"></p>

JavaScript

var showStoryButton = document.getElementById("showStoryButton");
var storyParagraph = document.getElementById("story");

showStoryButton.addEventListener("click", showStory);

function showStory() {
    storyParagraph.innerHTML = "The dog jumped over the fence.";
}

You must be signed in to type your fix.

Why doesn't clicking the button show a story?

HTML

<button id="showStory">Show story</button>
<p id="story"></p>

JavaScript

var showStoryButton = document.getElementById("showStory");
var storyParagraph = document.getElementById("storyParagraph");

showStoryButton.addEventListener("click", showStory);

function showStory() {
    storyParagraph.innerHTML = "The dog jumped over the fence.";
}

You must be signed in to type your fix.

Why doesn't clicking the button show a story?

HTML

<button id="showStory">Show story</button>
<p id="story"></p>

JavaScript

var showStoryButton = document.getElementById("showStory");
var story = document.getElementById("story");

showStoryButton.addEventListener("click", showStory);

function showStory() {
    storyParagraph.innerHTML = "The dog jumped over the fence.";
}

You must be signed in to type your fix.

Why doesn't clicking the button show a story?

HTML

<button id="showStory">Show story</button>
<p id="story"></p>

JavaScript

var showStoryButton = document.getElementById("showStory");
var storyParagraph = document.getElementById("story");

showStoryButton.addEventListener("click", story);

function showStory() {
    storyParagraph.innerHTML = "The dog jumped over the fence.";
}

You must be signed in to type your fix.

Why doesn't clicking the button show a story?

HTML

<button id="showStory">Show story</button>
<p id="story"></p>

JavaScript

var showStory = document.getElementById("showStory");
var storyParagraph = document.getElementById("story");

showStory.addEventListener("click", showStory);

function showStory() {
    storyParagraph.innerHTML = "The dog jumped over the fence.";
}

You must be signed in to type your fix.

Challenge 2

Reward: 2 points

Why doesn't moving the slider resize the dog?

HTML

<input id="width" type="range" min="50" max="400" value="400">
<img id="dog" src="dog.jpg">

JavaScript

var dog = document.getElementById("dog");
var widthInput = document.getElementById("width");

widthInput.addEventListener(setWidth);

function setWidth() {
    dog.style.width = widthInput.value + "px";
}

You must be signed in to type your fix.

Why doesn't moving the slider resize the dog?

HTML

<input id="width" type="range" min="50" max="400" value="400">
<img id="dog" src="dog.jpg">

JavaScript

var dog = document.getElementById("dog");
var widthInput = document.getElementById("width");

widthInput.addEventListener("input", setWidth);

function setWidth() {
    dog.style.width = widthInput + "px";
}

You must be signed in to type your fix.

Why doesn't moving the slider resize the dog?

HTML

<input id="width" type="range" min="50" max="400" value="400">
<img id="dog" src="dog.jpg">

JavaScript

var dog = document.getElementById("dog");
var widthInput = document.getElementById("width");

widthInput.addEventListener("input", setWidth);

function setWidth() {
    dog.style.width = widthInput.value;
}

You must be signed in to type your fix.

Why doesn't moving the slider resize the dog?

HTML

<input id="width" type="range" min="50" max="400" value="400">
<img id="dog" src="dog.jpg">

JavaScript

var dog = document.getElementById("dog");
var widthInput = document.getElementById("width");

widthInput.addEventListener("input", setWidth);

function setWidth() {
    dog.style.width = widthInput.value "px";
}

You must be signed in to type your fix.

Why doesn't moving the slider resize the dog?

HTML

<input id="width" type="range" min="50" max="400" value="400">
<img id="dog" src="dog.jpg">

JavaScript

var dog = document.getElementById("dog");
var widthInput = document.getElementById("width");

widthInput.addEventListener("input", setWidth);

function setWidth() {
    dog.style.width = widthInput.value + px;
}

You must be signed in to type your fix.

Challenge 3

Reward: 2 points

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

HTML

<img id="dog" src="dog.jpg">
<p id="message"></p>

JavaScript

var dog = document.getElementById("dog");
var messageParagraph = document.getElementById("message");
var clicks = 0;

dog.addEventListener("click", addClick);

function addClick() {
    clicks + 1;

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

You must be signed in to type your fix.

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

HTML

<img id="dog" src="dog.jpg">
<p id="message"></p>

JavaScript

var dog = document.getElementById("dog");
var messageParagraph = document.getElementById("message");
var clicks = 0;

dog.addEventListener("click", addClick);

function addClick() {
    clicks = clicks + 1;

    if clicks == 10 {
        messageParagraph.innerHTML = "woof woof";
    }
}

You must be signed in to type your fix.

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

HTML

<img id="dog" src="dog.jpg">
<p id="message"></p>

JavaScript

var dog = document.getElementById("dog");
var messageParagraph = document.getElementById("message");
var clicks = 0;

dog.addEventListener("click", addClick);

function addClick() {
    clicks = clicks + 1;

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

You must be signed in to type your fix.

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

HTML

<img id="dog" src="dog.jpg">
<p id="message"></p>

JavaScript

var dog = document.getElementById("dog");
var messageParagraph = document.getElementById("message");
var clicks = 0;

dog.addEventListener("click", addClick);

function addClick() {
    clicks = clicks + 1;

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

You must be signed in to type your fix.

Why does clicking the dog just once show a message?

HTML

<img id="dog" src="dog.jpg">
<p id="message"></p>

JavaScript

var dog = document.getElementById("dog");
var messageParagraph = document.getElementById("message");
var clicks = 0;

dog.addEventListener("click", addClick);

function addClick() {
    clicks = clicks + 1;

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

You must be signed in to type your fix.

Challenge 4

Reward: 3 points

Why doesn't clicking the pick winner button show a name after submitting two names?

HTML

<input id="name" type="text" placeholder="name">
<button id="submit">Submit</button>
<button id="pickWinner">Pick winner</button>
<p id="winner"></p>

JavaScript

var nameInput = document.getElementById("name");
var submitButton = document.getElementById("submit");
var pickWinnerButton = document.getElementById("pickWinner");
var winnerParagraph = document.getElementById("winner");
var names = [];

submitButton.addEventListener("click", submit);
pickWinnerButton.addEventListener("click", pickWinner);

function submit() {
    names.push(nameInput);
}

function pickWinner() {
    var randomNumber = Math.floor(Math.random() * names.length);
    winnerParagraph.innerHTML = names[randomNumber];
}

You must be signed in to type your fix.

Why doesn't clicking the pick winner button show a name after submitting two names?

HTML

<input id="name" type="text" placeholder="name">
<button id="submit">Submit</button>
<button id="pickWinner">Pick winner</button>
<p id="winner"></p>

JavaScript

var nameInput = document.getElementById("name");
var submitButton = document.getElementById("submit");
var pickWinnerButton = document.getElementById("pickWinner");
var winnerParagraph = document.getElementById("winner");
var names = [];

submitButton.addEventListener("click", submit);
pickWinnerButton.addEventListener("click", pickWinner);

function submit() {
    names.push(nameInput.value);
}

function pickWinner() {
    var randomNumber = Math.floor(Math.random() * names.length);
    winnerParagraph = names[randomNumber];
}

You must be signed in to type your fix.

Why doesn't clicking the pick winner button show a name after submitting two names?

HTML

<input id="name" type="text" placeholder="name">
<button id="submit">Submit</button>
<button id="pickWinner">Pick winner</button>
<p id="winner"></p>

JavaScript

var nameInput = document.getElementById("name");
var submitButton = document.getElementById("submit");
var pickWinnerButton = document.getElementById("pickWinner");
var winnerParagraph = document.getElementById("winner");
var names = [];

submitButton.addEventListener("click", submit);
pickWinnerButton.addEventListener("click", pickWinner);

function submit() {
    names.push(nameInput.value);
}

function pickWinner() {
    var randomNumber = Math.floor(Math.random() * names);
    winnerParagraph.innerHTML = names[randomNumber];
}

You must be signed in to type your fix.

Why does clicking the pick winner button show multiple names after submitting two names?

HTML

<input id="name" type="text" placeholder="name">
<button id="submit">Submit</button>
<button id="pickWinner">Pick winner</button>
<p id="winner"></p>

JavaScript

var nameInput = document.getElementById("name");
var submitButton = document.getElementById("submit");
var pickWinnerButton = document.getElementById("pickWinner");
var winnerParagraph = document.getElementById("winner");
var names = [];

submitButton.addEventListener("click", submit);
pickWinnerButton.addEventListener("click", pickWinner);

function submit() {
    names.push(nameInput.value);
}

function pickWinner() {
    var randomNumber = Math.floor(Math.random() * names.length);
    winnerParagraph.innerHTML = names;
}

You must be signed in to type your fix.

Why doesn't clicking a button change its color?

HTML

<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>

JavaScript

var buttons = document.querySelectorAll(".button");

buttons.addEventListener("click", changeColor);

function changeColor() {
    this.style.backgroundColor = "yellow";
}

You must be signed in to type your fix.

Why doesn't clicking a button change its color?

HTML

<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>

JavaScript

var buttons = document.querySelectorAll(".button");

for (var i = 0; i < buttons; i++) {
    buttons[i].addEventListener("click", changeColor);
}

function changeColor() {
    this.style.backgroundColor = "yellow";
}

You must be signed in to type your fix.

Why doesn't clicking a button change its color?

HTML

<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>

JavaScript

var buttons = document.querySelectorAll(".button");

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", changeColor);
}

function changeColor() {
    buttons[i].style.backgroundColor = "yellow";
}

You must be signed in to type your fix.