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 shyarkhalil
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points

I don't understand this function?

Could someone tell my why we use this function? why we call appendListItem inside forEach?

var recentSearches = getRecentSearches();
        recentSearches.forEach(function(searchString) {
          appendListItem(recentSearchList,searchString);
        });

This question related to Local storage course : https://teamtreehouse.com/library/local-storage-project

1 Answer

Joseph Wasden
Joseph Wasden
20,407 Points
Joseph Wasden
Joseph Wasden
20,407 Points

The answer lies in the function being called. :)

The recentSearches.forEach loop iterates over the local storage of recent searches, and then uses the appendListItem() function to add them to the DOM for the user to see.

    // Create an li, given string contents, append to the supplied ul
    function appendListItem(listElement, string) {
      var listItemElement = document.createElement('LI');
      listItemElement.innerHTML = string;
      listElement.appendChild(listItemElement);
    }
shyarkhalil
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points

Thank you Joseph Wasden! Ok, let's say we use appendListItem() inside recentSearches.forEach loop to add list Item to DOM. But why do we use appendListItem() inside addEventListener?

searchForm.addEventListener('submit', function(event) {
          event.preventDefault();
          var searchString = searchBar.value;
          searchBar.value = ' ';
          if (saveSearchString(searchString)) {
            appendListItem(recentSearchList, searchString);
          }
Joseph Wasden
Joseph Wasden
20,407 Points

We add it to the event listener so that, every time the submit event is applied, the user will see immediate visual feedback on the DOM that their search query has been added to the list of recent searches.