0

window.addEventListener("load", function () {

         document.getElementById("btnList").addEventListener("click", function () {
                    
             localforage.iterate((value, key, iterNum) => {
                 const lisst = [key, value]
                 document.getElementById('jstext').innerText = lisst
                 console.log(lisst) //log shows all of the added items
                                    //but lisst.length === 2
                                    //what am I missing?
         });
     }
<button id="btnList">List Values</button>
<div id="jstext">
</div>

enter image description here

Hello! What I am attempting to do here is display all of the different items that have been added to my localforage list. When I log to console, all of the items that have been added are displayed in console, but when I attempt to display the entire list in my <div> element, or even a <p> element, only ONE item (the last item entered) shows up on the webpage in the element.
So my question is: How do I display every item in my HTML element, and where am I going wrong that I am only showing the most recently entered item to localforage?

ArtimusMaximus
  • 63
  • 7

1 Answers1

1

The reason you're only seeing the last item is because you're setting the innerText of the element on every iteration.

In your case, you probably want to append the item to the innerText of the element using the addition assignment operator:

document.getElementById("jstext").innerText += lisst
Reed
  • 104
  • 6
  • Ah, that makes perfect sense @ Reed D. Thank you for the explanation. I tried your concat method, worked great. Just the same as doing an emptyList.push(value, key). The list with everything back to back w/only commas separating looked a bit messy. What I ended up doing is creating a P element and inserting the iterNum, key, & value into the innerHTML with a string literal and then appending it to the same div #paragraph element, now every list item has its own space! Thanks for your help, now I am off to figure out how I can remove individual list items and have the list update.... – ArtimusMaximus Dec 16 '21 at 19:18
  • Please, can you tick this answer correct? – Chiara Ani Dec 22 '21 at 13:57