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 Rae Macias
Rae Macias
1,666 Points

Interactive JavaScript - adding additional lists functions won't work

I went through the Interactive Javascript lesson and have it working. However, I'm trying to put two additional lists next to that original in columns and when copying and pasting the exact HTML code below the original, I can see the lists, but the functions to add/edit/delete won't work.

Do I have to adjust my JS to account for additional lists? The classes and IDs are all the same so I don't understand why it won't work.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Could you post your code, or a link to it (workshop snapshot, jsfiddle, codepen, etc)?

4 Answers

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

If you used three pieces of HTML with exact the same ID's the code will not work. ID's on HTML elements need to be unique. So you need to provide the two extra HTML blocks with unique ID's.

Rae Macias
Rae Macias
1,666 Points

Oh sorry, actually I'm using classes, except for the input id. Here is my HTML. So should I make the inputs into classes or just unique IDs? The buttons for add/edit/delete are all the same.

<div class="container"> <div class="column"> <header>Websites</header>

  <p>
    <label for="new-task">Add Favorite</label><input id="new-task" type="text"><button>Add</button>
  </p>

  <h3>Edit/Delete</h3>

  <ul id="incomplete-tasks">
    <li><input type="checkbox"><label>http://wellnessguides.org</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
    <li class="editMode"><input type="checkbox"><label>http://nationalwellness.org</label><input type="text" value="http://nationalwellness.org"><button class="edit">Edit</button><button class="delete">Delete</button></li>      
  </ul>
</div>

</div>

//And then for the next column

<div class="container"> <div class="column"> <header>Books</header>

  <p>
    <label for="new-task">Add Favorite</label><input id="new-task" type="text"><button>Add</button>
  </p>

  <h3>Edit/Delete</h3>

  <ul id="incomplete-tasks">
    <li><input type="checkbox"><label>The Future of God by Deepak Chopra</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
    <li class="editMode"><input type="checkbox"><label>Supersurvivors: The Surprising Link Between Suffering and Success by David B. Feldman</label><input type="text" value="Supersurvivors: The Surprising Link Between Suffering and Success by David B. Feldman"><button class="edit">Edit</button><button class="delete">Delete</button></li>      
  </ul>
</div>

</div>

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Sandler guessed part of it, you can't have more than one element with the same ID. Plus, your JavaScript probably needs to be able to recognise which column any button you press is in, so if you copied code that was written for a single column, it might be assuming specific IDs instead of accessing things relative to the this context.

Rae Macias
Rae Macias
1,666 Points
Rae Macias
Rae Macias
1,666 Points

I've tried several different things and still can't get this to work. I tried changing the IDs (new-task and incomplete-tasks) into classes, changed the JS to document.getElementByClassName and that didn't work. I also tried to leave the names as IDs but make them unique IDs (new-task, new-task2, new-task3) and did the JS with document.querySelectorAll("#new-task, #new-task2, #new-task3"); which also did not work.

I've viewed the "this" video and can't figure out how this works in the code I'm working with.

Do you have any other suggestions I can try? I'm really new at this and really want to get this thing to work.

Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

Could you post your JS code? This way we can see what's wrong.

Rae Macias
Rae Macias
1,666 Points
Rae Macias
Rae Macias
1,666 Points

Here is the entire JS, and the GH for the live version of the app is here. You'll see with the "Books" and "Podcasts" columns you cannot add/edit/delete...only with the "Websites" column. http://raerae961.github.io/wellnessApp/

Here is the codepen http://codepen.io/RaeRae961/pen/EPRKvM