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 Traversing and Manipulating the DOM with JavaScript Adding Multiple Event Listeners

kevinthecoder
kevinthecoder
10,791 Points
Posted by kevinthecoder
kevinthecoder
10,791 Points

Unable to complete the two event handlers challenge.

Alright, I'm stumped (again). I've looked at the videos and the code twice and carefully looked at the order of the words of the code. addEventListener looks correct. What am I doing wrong? Any help is appreciated. Thanks! :)

app.js 
//Select select box
var navigationSelect = document.getElementById("nav");

//Navigate to URL when select box is changed
var navigateToValue = function() {
  window.location = this.value;
}

//Send analytics data
var sendAnalytics = function() {
  //Placeholder  
}

//navigationSelect.onchange = navigateToValue;
//navigationSelect.onchange = sendAnalytics;
navigateToValue.addEventListener("change");
sendAnalytics.addEventListener("change");
index.html 
<!DOCTYPE html>
<html>
  <body>
    <select id="nav">
      <option value="index.html">Home</option>
      <option value="about.html">About</option>
    </select>
    <h1>Home</h1>
    <script src="app.js"></script>
  </body>
</html>
about.html 
<!DOCTYPE html>
<html>
  <body>
    <select id="nav">
      <option value="index.html">Home</option>
      <option value="about.html">About</option>
    </select>
    <h1>About</h1>
    <script src="app.js"></script>
  </body>
</html>

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Kevin,

When adding event listeners, you should add them to the element that needs listened to i.e. in this case, the "nav" element which is referenced by the variable navigationSelect. Then, you will call the addEventListener() method and the first argument is the event to listen for, which is correct. The second argument should be the function to call when the event is fired off. 

navigationSelect.addEventListener("change", navigateToValue);
navigationSelect.addEventListener("change", sendAnalytics);
kevinthecoder
kevinthecoder
10,791 Points
kevinthecoder
kevinthecoder
10,791 Points

Thanks, Marcus! I appreciate your explanation. Now it makes more sense.

I would have to say that out of all the courses I have taken so far, this and jQuery were by far the toughest ones (although a few of the Ruby sections were tough too). I'm a pretty logical person but I just wasn't able to follow the 'logic' very well in this particular Badge/Section. I got lost pretty quickly and wasn't able to follow the teacher very well and at times, his explanations (or lack of explanations). jQuery was pretty tough too (although I did like some of the items). I think I will need to study a few other sources on Javascript until I 'get it' . If you have any recommendations (from you or others) on Javascript, feel free to pass them along.

By the way, I did enjoy Dave's Javascript Basics course; I was able to follow that one very well.

On to the next course....

Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome! Check out http://www.codeacademy.com and its free JavaScript courses. They are excellent! They helped me with Treehouse, as well.

If you want to go ahead and select my answer as best answer, we can mark this question as closed :)