Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Dan Putnam
Dan Putnam
5,045 Points

Does a var that is set = to an object 'become' that object?

In this video we said

var addButton = document.getElementsByTagName("button")[0];

then at the bottom addButton.onclick = addTask;

we are adding an .onclick to "addTask"

So my question is- are addTask and the button tag object the exact same thing, aka are they referring to the same 'object' or is the var addTask a copy of the button.

I'm confused about how this works.

Could I set two different vars like this:

var exampleOne = document.getElementsByTagName("button")[0]; var exampleTwo = document.getElementsByTagName("button")[0];

and then perform different actions to each var- maybe an exampleOne.onclick = addTask; exampleTwo.onmouseover = addTask;

3 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Dan,

addButton in this course is a reference to that button because you specified which button with the index of 0, which just means that anything done to this variable will directly affect the element itself. With that in mind, if you make two differently named variables that reference the same element, they will both update the same element. In your case, both the onclick and onmouseover event handlers would be attached to the button. Does that make more sense?

maryam aljimaz
maryam aljimaz
8,051 Points
maryam aljimaz
maryam aljimaz
8,051 Points

document.getElementsByTagName("button") is a method that returns a live HTMLCollection of elements with the given tag name "button". When you specify index 0, you are retrieving the first button element in the collection and assigning it to variable addButton.

addButton.onclick = addTask;

addTask is a function that is called when addButton is click. You are specifying that you want click event to raised when the user clicks on addButton using (addButton.onclick). addTask without () so the function is not called immediately. You want the event to run the function when it button click event occurs.

exampleOne and exampleTwo are the same thing. You can use the same element and assign multiple events to it.

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

It's been awhile since I took this course, but I think that you are confused on the addButton.onclick = addTask; line of code.

The first variable declaration for addButton creates a reference to that particular DOM element, whereas the addButton.onclick is an event handler. addTask is not the same "object" per se, but rather a function that is being called when the addButton variable is clicked.

This line of code, where the program executes the addTask function when the addButton is clicked: 

addButton.onclick = addTask;

is different from this line of code, where we assign the value of addButton to be the value of the addTask function:

addButton = addTask;

Technically, you could do what you outline in the example, but then you'd have to keep track of two variables that reference the same DOM element, and any changes you made to one would impact the other (I'm thinking more of adding classes here). You could just as easily add two separate event handlers to the same variable.

I hope that helps, but let me know if my explanation in unclear.