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
Andrea Rios
Front End Web Development Techdegree Student 10,078 PointsPractice 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); });
3 Answers
Steven Parker
231,236 PointsTo 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.
Bolivar Arguello
Front End Web Development Techdegree Student 9,429 PointsEverything seems to be right but just two small issues on item 3 and 7.
// 1: Set the text of the <h1> element
const h1 = document.querySelector('h1'); h1.textContent = "Working with the DOM";
// 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
/==========THE PROBLEM==============/ //SHOULD BE CONST WHEN DECLARING VARIABLES AND NOT CONT
/* cont desc = document.querySelector('.desc'); desc.innerHTML = "Having fun in the <strong>HOOD</strong>"; */
/==========THE SOLUTION==============/ const 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>
/=======THE PROBLEM=======/ //REMOVE THE QUOTES ON 4TH LINE INSIDE THE PARENTHESIS
/const deleteButton = document.createElement('button'); deleteButton.textContent = "DeLeTe"; const extra = document.querySelector('.extra'); extra.appendChild('deleteButton');/
/==========THE SOLUTION===========/ 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); });
Steven Parker
231,236 PointsInstead of posting a question as an "answer" to another question, always start a fresh new one of your own.
Also, when posting code, always use Markdown formatting to preserve the code's appearance.
Bolivar Arguello
Front End Web Development Techdegree Student 9,429 PointsIf this anyhow helps I uploaded it to my GitHub account:
https://github.com/Bolarg9764/PracticeManipulatingTheDOM/blob/main/js/scripts.js
Steven Parker
231,236 PointsAn even better way to share code is with a snapshot of a Treehouse workspace. It greatly simplifies replicating the issue.
Andrea Rios
Front End Web Development Techdegree Student 10,078 PointsAndrea Rios
Front End Web Development Techdegree Student 10,078 Pointsalready did that and still does not work :(
Steven Parker
231,236 PointsSteven Parker
231,236 PointsMaking 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.