diff --git a/README.md b/README.md index dca414e9f..a0a9f6772 100644 --- a/README.md +++ b/README.md @@ -2992,11 +2992,14 @@ zipWith( Converts the given array elements into `
  • ` tags and appends them to the list of the given id. -Use `Array.map()` and `document.querySelector()` to create a list of html tags. +Use `Array.map()`, `document.querySelector()`, and an anonymous inner closure to create a list of html tags. ```js const arrayToHtmlList = (arr, listID) => - arr.map(item => (document.querySelector('#' + listID).innerHTML += `
  • ${item}
    • `)); + (el => ( + (el = document.querySelector('#' + listID)), + (el.innerHTML += arr.map(item => `
  • ${item}
    • `).join('')) + ))(); ```
    diff --git a/docs/browser.html b/docs/browser.html index 2a7a56f28..2822834cb 100644 --- a/docs/browser.html +++ b/docs/browser.html @@ -79,8 +79,11 @@ document.getElementById('doc-drawer-checkbox').checked = false; } }, false); - }

    logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

     

    Browser

    arrayToHtmlList

    Converts the given array elements into <li> tags and appends them to the list of the given id.

    Use Array.map() and document.querySelector() to create a list of html tags.

    const arrayToHtmlList = (arr, listID) =>
-  arr.map(item => (document.querySelector('#' + listID).innerHTML += `<li>${item}</li>`));
+      }
    logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
     
    Browser
    arrayToHtmlList
    Converts the given array elements into <li> tags and appends them to the list of the given id.
    Use Array.map(), document.querySelector(), and an anonymous inner closure to create a list of html tags.
    const arrayToHtmlList = (arr, listID) =>
+  (el => (
+    (el = document.querySelector('#' + listID)),
+    (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
+  ))();
 
    arrayToHtmlList(['item 1', 'item 2'], 'myListID');
 
    bottomVisible
    Returns true if the bottom of the page is visible, false otherwise.
    Use scrollY, scrollHeight and clientHeight to determine if the bottom of the page is visible.
    const bottomVisible = () =>
   document.documentElement.clientHeight + window.scrollY >=
diff --git a/snippets/arrayToHtmlList.md b/snippets/arrayToHtmlList.md
index 6a55e19e0..19100cfc0 100644
--- a/snippets/arrayToHtmlList.md
+++ b/snippets/arrayToHtmlList.md
@@ -5,9 +5,11 @@ Converts the given array elements into `
  • ` tags and appends them to the list
 Use `Array.map()`, `document.querySelector()`, and an anonymous inner closure to create a list of html tags.
 
 ```js
- const arrayToHtmlList = (arr, listID) =>
-  (el => (el = document.querySelector('#' + listID), 
-    el.innerHTML += arr.map(item => `
  • ${item}
    • `).join('')))()
+const arrayToHtmlList = (arr, listID) =>
+  (el => (
+    (el = document.querySelector('#' + listID)),
+    (el.innerHTML += arr.map(item => `
  • ${item}
    • `).join(''))
+  ))();
 ```
 
 ```js