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 One Solution

Andrea Rios
Andrea Rios
Front End Web Development Techdegree Student 8,770 Points

Practice Manipulating the DOM - did same as teacher and nothing changes on website

Elements disappear on website.

what's happening??

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>Practice Manipulating the DOM</title> </head> <body> <div class="container"> <h1></h1> <p class="desc"></p> <ul> <li><input> Play music</li> <li><input> Swim</li> <li><input> Bike ride</li> <li><input> Code</li> </ul> <div class="extra"> <p>This is extra content you need to delete.</p> </div> </div> <script src="js/scripts.js"></script> </body> </html>

// 1: Set the text of the <h1> element const h1 = document.querySelector('h1'); h1.textContent = "heyyyyy";

// 2: Set the color of the <h1> to a different color h1.style.color = "orchid";

// 3: Set the content of the '.desc' paragraph // The content should include at least one HTML tag cont desc = document.querySelector('.desc'); desc.innerHTML = "Having fun in the <strong>HOOD</strong>";

// 4: Set the class of the <ul> to 'list' const list = document.querySelector('ul'); list.className = "list";

// 5: Create a new list item and add it to the <ul> const item = document.createElement('li'); item.innerHTML = "<input> Walk my fish"; list.appendChild(item);

// 6: Change all <input> elements from text fields to checkboxes const input = document.getElementsByTagName('input'); for (let i = 0; i < input.length ; i++) { input[i].type = 'checkbox'; };

// 7: Create a <button> element, and set its text to 'Delete' // Add the <button> inside the '.extra' <div> const deleteButton = document.createElement('button'); deleteButton.textContent = "DeLeTe";

const extra = document.querySelector('.extra'); extra.appendChild('deleteButton');

// 8: Remove the '.extra' <div> element from the DOM when a user clicks the 'Delete' button const container = document.querySelector('.container'); deleteButton.addEventListener('click', () => { container.removeChild(extra); });

1 Answer

Steven Parker
Steven Parker
216,891 Points

To make your changes visible, you must do two things:

  • save the changes using the menu or CTRL-S shortcut
  • then refresh the browser window

If that's not it, you might try sharing your entire workspace. Here's a video that explains how to make a workspace snapshot to share.

Steven Parker
Steven Parker
216,891 Points

Making a workspace snapshot would allow replication of your issue. Also, it would help if you explain exactly how what you are seeing differs from what you are expecting.