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

JavaScript

Fuad Muhammad
Fuad Muhammad
4,273 Points
Posted by Fuad Muhammad
Fuad Muhammad
4,273 Points

I can't use appenChild(); on my browser.

"ul.appendChild is not a function" this is what I get on my browser. Why? Anyone can explain me about this??

'''

<!DOCTYPE html> <html> <head> <title>JavaScript and the DOM</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 id="myHeading">JavaScript and the DOM</h1> <h2 id="mySubHeading"></h2> <p>Making a web page interactive</p> <button id="toogleList">Hide List</button>

<div class="list">
  <p class="description">Things that are purple:</p>
  <input type="text" class="description">
  <button class="description">Enter The Sentences</button>
  <ul>
    <li>grapes</li>
    <li>amethyst</li>
    <li>lavender</li>
    <li>plums</li>
  </ul>
  <input type="text" class="addItemInput">
  <button class="addItemButton">Add Item</button>
  <button class="removeItemButton">Remove Item</button>
</div>
<script src="app.js"></script>
<!--<script src="temp.js"></script>-->

</body> </html>

// Set all of the element on the HTML for use all on the JS. const toggleList = document.getElementById('toogleList'); const listDiv = document.querySelector('.list'); const descriptionInput = document.querySelector('input.description'); const descriptionP = document.querySelector('p.description'); const descriptionButton = document.querySelector('button.description'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton'); const removeItemButton = document.querySelector('button.removeItemButton'); const listItems = document.getElementsByTagName('li');

//make some effect on each list every we hover the list item. for (let i = 0; i < listItems.length; i++) { listItems[i].addEventListener('mouseover', () => { listItems[i].textContent = listItems[i].textContent.toUpperCase(); }); listItems[i].addEventListener('mouseout', () => { listItems[i].textContent = listItems[i].textContent.toLowerCase(); }); }

document.addEventListener('click', (event) => { console.log(event.target); });

//Show and hidden the <div> element toggleList.addEventListener('click', () => { if (listDiv.style.display == 'none') { toggleList.textContent = 'Hide List'; listDiv.style.display = 'block'; } else { toggleList.textContent = 'Show List'; listDiv.style.display = 'none'; } });

descriptionButton.addEventListener('click', () => { descriptionP.innerHTML = descriptionInput.value + ': '; //'innerHTML' can do more than handling text. 'textContent' also can do it, but it is not enough. });

//This function to help button add the input into the ul elements. addItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul'); let li = document.createElement('li'); li.textContent = addItemInput.value; //ul get the what user wants. ul.appendChild(li); //adding li on the ul. addItemInput.value = ''; });

removeItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul'); let li = document.querySelector('li:last-child'); ul.removeChild(li); //remove li on the ul. });

'''

Ella Ruokokoski
Ella Ruokokoski
20,881 Points

Can you post your code, please?

1 Answer

Umesh Ravji
Umesh Ravji
42,386 Points
Umesh Ravji
Umesh Ravji
42,386 Points

Hi Fuad, if you ever encounter cases where your being told something is not a function, make sure to check the type of the variable you are calling the method on. If it is not the type you were expecting, null, or undefined, your going to get that error.

let ul = document.getElementsByTagName('ul');

This code returns an HTMLCollection of elements, not a single UL element. Since you're trying to call the appendChild() method on the collection, not a single element, you are getting that error.

let ul = document.getElementsByTagName('ul')[0];

This code will obtain the first UL element that is on the page (and is okay in this case). It maybe better to give the un-ordered list an ID attribute so it can be easily selected. There's also the option of using document.querySelector(), but I leave exploring that up to you :)