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
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsMy solution for the "button up and down remove challenge " ?
Hi folks,
I solved the challenge regarding to the button problem (e.g.: when the last child has a down button). Maybe my solution is too complicated, so if you have a shorter or more effective version and you could share it, it would be nice. Here is mine:
The program works smoothly (you can add, delete/remove buttons and it's also responsive because when you have only 1 item left it shows only the remove button or if you have only 2 items left it shows only up for the list item and only down for the first),
BUT I don't understand these 2 variables:
const firstListitem = ulFater.firstElementChild;
const lastListitem = ulFater.lastElementChild;
After you run the program and remove some items/ add some items and call this variable in the console, you will see that the firstElementChild variable has remained "Grapes", however, if you type "ulFater" or "lis" variable in the console, you can say that these variables show the actual/current list.
Why is this? ulFater is correct but firstListitem variable is not updated? Could you please help?
2 Answers
Steven Parker
229,786 PointsI assume your "ulFater" contains an HTMLCollection, and those are "live" which means they get updated when any changes are made in the DOM.
But when you take the value of one of their properties and put it into another variable (like "firstListitem") that value remains what it was at the moment of the assignment until/unless it is assigned again.
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsBut ulFater comes from a simple querySelector:
const ulFater = document.querySelector('ul');
Steven Parker
229,786 PointsSorry, I misinterpreted the situation. But the concept is still similar. Since "ulFater" refers to the element itself, if you use it to access any properties, they will show the current state of that element.
But if you copy the value of a property to a variable, that variable will always show what the value was at the time of the assignment.
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsPeter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsThank you, Steven, you're awesome as always ? I thought that only document.querySelectorAll is 'live', because of the Nodelist but not the simple querySelector. So all HTML collections are live?
Steven Parker
229,786 PointsSteven Parker
229,786 PointsThe HTMLCollections are live, but "querySelector" returns a single element not a collection.