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
Marvin Müller
8,884 PointsAppending a Button to a new LI Element. But only the first created Element appends it
Hello Folks,
I was recreating a challenge from the javascript course were I appending a button element directly to a newly created Listelement to delete this one. The problem is : only the first element I create with my Button is getting the "Delete this task" button. Any clue why ? Here's the JS code:
const createButton = document.querySelector("#create");
const lastDelete = document.querySelector("#delete");
const listDelete = document.createElement("Button");
listDelete.textContent = "Delete this Task";
createButton.addEventListener("click", () => {
var ul = document.getElementsByTagName("ul")[1];
var newListItem = document.createElement("li");
ul.appendChild(newListItem);
newListItem.textContent = taskInput.value;
newListItem.append(listDelete);
taskInput.value = " ";
});
If you need anything else , just tell me :)
Thanks in advance
4 Answers
Vibes 420
Full Stack JavaScript Techdegree Student 9,982 PointsHi Marvin, I can see where the error is... the reason why only one instance of the listdelete button is created is because you created the listdelete outside the event listener. So that gives you only 1 instance. but if you want a listdelete button inside every task you create you need to put the code inside the event listener so an instance of listdelete is created each time you click on the create new task like this...
<div id="taskDiv">
<h1 class="taskHeadline">Liste aller Aufgaben</h1>
<ul class="taskListe">
</ul>
<input type ="text" placeholder="Taskname" class="task">
<button id="create">Create new Task</button>
<button id="delete">Delete last created Task</button>
</div>
<script>
const createButton = document.querySelector("#create");
const lastDelete = document.querySelector("#delete");
//I removed the listdelete and put it inside the eventlistener
createButton.addEventListener("click", () => {
var ul = document.getElementsByTagName("ul")[0]; //Also I replace the index with 0 to select the ul
var newListItem = document.createElement("li");
const listDelete = document.createElement("Button");
listDelete.textContent = "Delete this Task";
const taskInput = document.getElementsByClassName('task')[0]; // And l declared the taskInput variable since you didn't declare it
newListItem.textContent = taskInput.value;
newListItem.append(listDelete);
ul.appendChild(newListItem);
taskInput.value = " ";
});
</script>
I hope this helps.
Marvin Müller
8,884 PointsSure. Here's whats relevant for that one:
<div id="taskDiv">
<h1 class="taskHeadline">Liste aller Aufgaben</h1>
<ul class="taskListe">
</ul>
<input type ="text" placeholder="Taskname" class="task">
<button id="create">Create new Task</button>
<button id="delete">Delete last created Task</button>
</div>
Marvin Müller
8,884 Pointsahhh sure okay that makes total sense :D . THANK YOU. Problem now is , that my click event for the listDelete button is now outside the other eventlistener XD so that listDelete is not declared and has no function :P Any Idea?
Marvin Müller
8,884 PointsOkay seems like you can put eventlisteners into eventlisteners....so nvm
Vibes 420
Full Stack JavaScript Techdegree Student 9,982 PointsVibes 420
Full Stack JavaScript Techdegree Student 9,982 PointsHello Marvin. You question would be clearer if you add the html too...