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

Posted by mryoung
mryoung
4,156 Points

Trying to get used to manipulating the DOM...need some input

Hello, I'm trying to get used to manipulating the DOM

Here's part of a workspace that I followed through with:

addItemButton.addEventListener ('click', () => {
   let ul = document.getElementsByTagName('ul')[0];                              
   let li = document.createElement('li'); 
   li.textContent=addItemInput.value;
   ul.appendChild(li);
 });

So, I'm trying to adapt what I'm learning above into my own projects, what is wrong with what I have below?

const myList = document.querySelector("ul");
const images = ["#image1", "#image2", "#image3", "#image4"];
const thisList = ["saying1", "saying2", "saying3", "saying4"];

    document.querySelector(images[I]).addEventListener ('click', () => {
    myList = document.getElementByTagName('ul');
    let li = document.creatElement('li');
    li.textContent = '<li>thisList[I]</li>';
    myList.appendChild(li);
});
}

The end result should be that the user clicks an image, and it adds a list item (the saying) to the list. Currently, I can get A list item, but it disappears as soon as the user clicks another image and THAT new list item takes it place. I figured I needed to append the list to keep the list growing.

2 Answers

mryoung
mryoung
4,156 Points

I figured out my answer, thanks for the help though!

for (let i = 0; i < images.length; i++) {
  document.querySelector(images[i]).addEventListener("click", () => {
      let ul = document.getElementById('myList');
      let li = document.createElement('li');
      li.textContent = `${thisList[i]}`;
      ul.appendChild(li);
    }
  );
}

I used the console to find my errors (some minor typos), and rearranged some things. It now works perfectly! I'm excited that I figured it out on my own!

Gabriel Plackey
Gabriel Plackey
11,064 Points

Awesome man, good for you! Learning to use the console regularly and correctly is important and will help you debug your code faster and easier and will help you teach yourself. I'm glad you were able to figure it out on your own.

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

You need to remove the last bracket, it throws an error in the console. Unless this is apart of a bigger if or function. You're list in in an array, so you need to use the push() function I believe.

mryoung
mryoung
4,156 Points

do you mean like this?

 myList = document.getElementByTagName('ul').push();

This didn't work, unfortunately.

I'm not understanding what I'm missing while working on this project:

  • I've grabbed the ul

  • I've grabbed the desired list items

  • I've created the list item element

  • I've appended the list item to the ul