함수 및 로컬 저장소 관련 문제

Question

이 코드는 원래 input.value를 가져 와서 페이지에 추가했습니다. 이 프로젝트에 로컬 스토리지를 추가했는데 코드가 이미 작성되었지만 localStorage에서 페이지에 대한 입력을 표시하는 데 어려움을 겪고 있습니다. 입력은 배열의 객체로 로컬 저장소에 저장됩니다. 나는 for 루프를 작성하여 그 값을 반복하고 요소를 빌드하고 li에 추가 한 다음 나중에 ul에 추가하는 함수에 전달합니다. 페이지에 표시되지 않고 콘솔에 오류가 표시되지 않습니다. 내가 그렇게 heres는 내 코드를 설정하는 경우 확실하지 않다 :

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; 

}

} 을}

전체 프로젝트는 여기에 있습니다 : https://github.com/tianniNakiMyers/RSVP_TeamTreeHouse/blob/master/app.js는

Answer 1

코드의 문제는 당신은 아마도 fetchInvite을 호출하지 않았을 것입니다.

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