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 Interacting with the DOM Responding to Events Listening for Events with addEventListener()

Joshua Munoz
PLUS
Joshua Munoz
Courses Plus Student 7,794 Points
Posted by Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points

Issue: Listening for Events with addEventListener()

So there seems to be an issue with this lesson in "Interacting with the DOM ". at about the half way point through the lesson he walks you through making the tasks to uppercase when you hover over them, but when I started the the lesson and opened the Workspace for this lesson it was already doing this and there doesn't seem to be any code I can see that is doing this.

This is the default code for the lesson before I did anything:

const btnCreate = document.getElementById('btn-main');
const btnToggle = document.querySelector('.btn-toggle');
const btnRemove = document.querySelector('.btn-remove');
const taskList = document.querySelector('.list-container ul');


btnToggle.addEventListener('click', () => {
  const listContainer = document.querySelector('.list-container');
  if (listContainer.style.display === 'none') { 
    btnToggle.textContent = 'Hide List';
    listContainer.removeAttribute('style');
  } else {
    btnToggle.textContent = 'Show List';                        
    listContainer.style.display = 'none';
  }                         
});

btnCreate.addEventListener('click', () => {
  const input = document.querySelector('.input-main');
  const list = document.querySelector('ul');
  list.insertAdjacentHTML( 
    'afterbegin', 
    `<li>${input.value}</i>` 
  );
  input.value = '';
});

btnRemove.addEventListener('click', () => {
  const li = document.querySelector('li:last-child');
  li.remove();
});

and this is the code I wrote that the teacher walked me through, when I added the code it stopped capitalizing the text:

const listItem = document.getElementByTagName('li')[0];

listItem.addEventListener('mouseover', () =>{
      listItem.textContent = listItem.textContent.toUpperCase();                    
});
Stephen Cole
Stephen Cole
Courses Plus Student 15,809 Points
Stephen Cole
Stephen Cole
Courses Plus Student 15,809 Points

I noticed similar behavior as Joshua.

In my workspace is some pre-existing code:

taskList.addEventListener('mouseover', (event) => {
    if(event.target.tagName === 'LI'){
        event.target.textContent = event.target.textContent.toUpperCase();
    }
})

I commented it out and the example presented by Reggie worked as expected.

Also, the console presents an error inside Chrome every time you open the console. So far, this has been true of every course.

Adding this line inside the <head> section fixes it:

<link rel="shortcut icon" href="#">

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

When I open the "Workspaces" tab on that page, it says "This video does not use a Workspace." So I'm guessing you're using the workspace from the Functions as Parameters lesson.

That workspace opens with different content from what is shown above, and it already contains the handler for the mouseover event, which explains how it did the capitalization.

One issue with the code shown above is that it calls "getElementByTagName" (singular), which is not a standard function. The correct name is "getElementsByTagName" (plural).

If you still need help with other issues, it would be helpful to see the complete workspace. Take a look at this video about sharing a snapshot of your workspace.