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 JavaScript and the DOM Making Changes to the DOM Set Inline Styles with the style Property

Jesse Gonzalez
Jesse Gonzalez
4,589 Points

Set Inline Styles with the style Property

example shown on how to display/hide the div class container wasn't working UNTIL I commented out the other eventListener. any reason why?

const btnUpdate = document.querySelector('.btn-main'); const btnToggle = document.querySelector('.btn-toggle');

//btnUpdate.body.addEventListener( 'click' , () => { // const headline = document.getElementById('headline'); // const input = document.querySelector('.input-main'); // headline.className = 'grow'; // headline.textContent = input.value; // input.value = ''; //});

btnToggle.addEventListener('click', () => { const listContainer = document.querySelector('.list-container');

if (listContainer.style.display === 'none') { btnToggle.textContent = 'Hide List'; listContainer.style.display = 'block'; } else { btnToggle.textContent = 'Show List'; listContainer.style.display = 'none'; } });

2 Answers

Jason Larson
Jason Larson
7,199 Points

When I copied your code into the workspace, there were a few issues. I don't know if there was something not done in my workspace previously, but in my index.html, the button with the text "Update Heading" had an id of "btnmain" rather than having a class of "btn-main". Once I updated those to be the same as the video, I was getting "Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')" on line 4. I removed the body element out of the addEventListener statement, and that seems to have resolved the issue. Here is the updated code:

const btnUpdate = document.querySelector('.btn-main');
const btnToggle = document.querySelector('.btn-toggle');

btnUpdate.addEventListener( 'click', () => { 
   const headline = document.getElementById('headline'); 
   const input = document.querySelector('.input-main'); 
   headline.className = 'grow'; 
   headline.textContent = input.value; 
   input.value = ''; 
});

btnToggle.addEventListener('click', () => {
  const listContainer = document.querySelector('.list-container');

  if (listContainer.style.display === 'none') { 
    btnToggle.textContent = 'Hide List';
    listContainer.style.display = 'block';
  } else {
    btnToggle.textContent = 'Show List';
    listContainer.style.display = 'none';
  }
});

By the way, when you post code, it makes it much easier for someone looking at it if you will post it with 3 backticks on a blank line before and after the code, so that it displays in code block like you wrote it. If you put js after the top 3 backticks, it will give syntax highlighting as well.

Jesse Gonzalez
Jesse Gonzalez
4,589 Points

Thanks for the answer! I looked over my HTML and I do have the class "btn-main", it seems it was the body, after asking the question i went line by line and found that indeed was the issue! When updating the code along with the class I must've missed it! I got both to work after! show/hide and the update heading simultaneously!