関数とローカルストレージに関する問題

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