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

Joshua Munoz
PLUS
Joshua Munoz
Courses Plus Student 7,238 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();                    
});

1 Answer

Steven Parker
Steven Parker
216,879 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.