Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Selecting Elements and Adding Events with JavaScript Perform: Selecting Elements

Radha Bhambwani
Radha Bhambwani
10,182 Points

Using firefox console instead of chrome's

I'm trying to use the firefox console or with the firebug add-on. But somehow all the variables are showing up as undefined, while chrome's console shows exactly what I expect it to. Can anyone please tell me why the firefox console is being picky? Here's my code:

var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0];//first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks

2 Answers

Christopher Crouch
Christopher Crouch
11,992 Points

Sorry this might not be the most helpful answer, but it seems to be working ok on this end. I'm going to the course linked on the right side of the screen, opening the workspace for that video, viewing in Firefox and entering the following in the Firebug console:

var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0];//first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks

console.log( taskInput );
console.log( addButton );
console.log( incompleteTasksHolder );
console.log( completedTasksHolder );

This is what I'm getting back:

<input id="new-task" type="text">
<button>
<ul id="incomplete-tasks">
<ul id="completed-tasks">

Do they come up as undefined for you with console.log?

Radha Bhambwani
Radha Bhambwani
10,182 Points

That definitely helps! Actually, I realized what the mistake was. It was because I forgot to refresh the browser after writing more code in sublime. I thought that reopening the console automatically refreshes the browser.. Such a silly mistake! Thanks for your help though!