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
Kostatinos Yacoumakis
Full Stack JavaScript Techdegree Graduate 16,231 PointsKeep getting a typeError for appendChild
I keep getting a type Error for appendChild : appendChild is not a function, whether I type it or auto-fill. Can someone look at my coed please? // 1: Set the text of the <h1> element let h1 = document.querySelector('h1'); h1.textContent = 'Dean';
// 2: Set the color of the <h1> to a different color
h1.style.color = 'red'; // 3: Set the content of the '.desc' paragraph // The content should include at least one HTML tag let desc = document.getElementsByClassName('.desc'); desc.innerHTML = "Dean's content" desc.textContent = "Dean's <link> stupid </link> Content";
// 4: Set the class of the <ul> to 'list' let list = document.getElementsByTagName('ul'); list.className = 'list';
// 5: Create a new list item and add it to the <ul> let li = document.createElement('li'); li.innerHTML = "<input> Shitting"; list.appendChild(li);
// 6: Change all <input> elements from text fields to checkboxes let input = document.querySelectorAll('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>
let dButton = document.createElement('button'); dButton.textContent = 'Delete'; let extraDiv = document.getElementsByClassName('.extra'); extraDiv.appendChild(dButton); // 8: Remove the '.extra' <div> element from the DOM when a user clicks the 'Delete' button const container = document.querySelector('.container'); dButton.addEventListener ('click', () => { container.removeChild(extra);
})
3 Answers
Jamie Reardon
Treehouse Project ReviewerThe getElementsByTagName returns an array of all the selected elements on the page. Therefore if you have more than one ul element, you would need to add [0] after the argument in the getElementsByTagName method if you want to select only the first ul element that appears on the page.
anthony amaro
8,686 Pointswhen getting a class from the dom you can get it with
// when using querySelector you need the dot if is a class what you are trying to get # for id
const extraDiv = document.querySelector('.extra');
// or by class name you dont need the dot
const extraDiv = document.getElementsByClassName('extra');
notice how when getting it with querySelector you need the dot just like CSS to get the class? but you dont need the dot when using getElementsByClassName.
try removing the dot or try changing it to querySelector and see if that solves your problem. because you probably are getting undefined from extraDiv
Kostatinos Yacoumakis
Full Stack JavaScript Techdegree Graduate 16,231 PointsThanks for the distinction! I should have been a little more specific though. I'm getting an uncaught type error with the following snippet.
// 5: Create a new list item and add it to the <ul>
let li = document.createElement('li');
li.innerHTML = "<input> Shitting";
list.appendChild(li);
anthony amaro
8,686 Pointsdo you mind sharing the link to the challenge or the video from this?
Kostatinos Yacoumakis
Full Stack JavaScript Techdegree Graduate 16,231 PointsKostatinos Yacoumakis
Full Stack JavaScript Techdegree Graduate 16,231 Points