Probleme mit Funktionen und lokalem Speicher

Question

Dieser Code nahm ursprünglich input.value und fügte es der Seite hinzu. Ich habe diesem Projekt lokalen Speicher hinzugefügt und der Code ist bereits geschrieben, aber ich habe Schwierigkeiten, die Eingabe von localStorage auf der Seite anzuzeigen. Die Eingabe wird im lokalen Speicher als Objekte in einem Array gespeichert. Ich habe eine for-Schleife geschrieben, um diese Werte zu durchlaufen und sie an Funktionen weiterzugeben, die das Element aufbauen und es an die li anhängen und später an die ul anhängen. Es wird nicht auf der Seite angezeigt und ich bekomme keine Fehler in der Konsole. Ich bin mir nicht sicher, wo zu drehen, so herer meinen Code:

function fetchInvite() { 
    const rsvpInvite = JSON.parse(localStorage.getItem("Invitees")); 
    const rsvpList = document.getElementById('invitedList'); 

    for(var i = 0; i < rsvpInvite.length; i++) { 
     const name = rsvpInvite[i].name; 
     const confirm = rsvpInvite[i].confirmed; 
     createLI(name, confirm); 

    function createLI(name, confirm) { 
     const li = document.createElement('li'); 

    function createElement(elementName, property, value) { 
     const element = document.createElement(elementName); 

     element[property] = value; 
     return element; 
    } 
    function appendToLI (elementName, property, value) { 
     const element = createElement(elementName, property, value); 
     li.appendChild(element); 
     return element; 
    } 

appendToLI('span', 'textContent', name); 
appendToLI('label', 'textContent', confirm) 
.appendChild(createElement('input', 'type', 'checkbox')); 
appendToLI('button', 'textContent', 'edit'); 
appendToLI('button', 'textContent', 'remove'); 
return li; 

}

} }

Das vollständige Projekt finden Sie hier: https://github.com/tianniNakiMyers/RSVP_TeamTreeHouse/blob/master/app.js

Answer 1

Das Problem mit Ihrem Code ist dass Sie wahrscheinlich nie fetchInvite genannt haben.

Abgesehen davon, dass hier ein Refactoring des Codes:

function elt(parent, tag, text) {          // create element of tagname tag and append it to a parent (if provided) then set its textContent to text and return it 
    var el = document.createElement(tag); 
    if(parent) { 
     parent.appendChild(el); 
    } 
    el.textContent = text; 
    return el; 
} 

function fetchInvite() { 
    const rsvpInvite = JSON.parse(localStorage.getItem("Invitees")); 
    const rsvpList = document.getElementById('invitedList'); 

    for(var i = 0; i < rsvpInvite.length; i++) { 
     const name = rsvpInvite[i].name; 
     const confirm = rsvpInvite[i].confirmed; 

     const li = elt(rsvpList, 'li', '');        // create an li element with empty text and append it to rsvpList 
     elt(li, 'span', name);           // create a span whose text is name and append it to li 
     elt(elt(li, 'label', confirm), 'input', '').type = 'checkbox'; // create an input append it to a label element that contain the text confirm and that is appended to li, then set type of input to 'checkbox' 
     elt(li, 'button', 'edit');          // ... 
     elt(li, 'button', 'remove'); 
    } 
} 

fetchInvite(); // don't forget to call it