קורס Front-End Web Development שיעור אחסון צד לקוח localStorage


זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/local-storage

מוזר משום מה הוא נופל לי בשורה השלישית - לא מצליח להבין מה הבעיה שלו ?
הוא רושם שהפונקציה לא מוגדרת ? האם חייב ב JS - להגדיר את הפונקציות מראש ? זה הסיפור כי הוא מקמפל תוך כדי ריצה ?

var f = document.getElementsByTagName("form")[0];
var texts = f.getElementsByTagName("input");
var toSave =document.getElementsByName("toSave");

toSave.addEventListener("change",toSaveChange);

loadFromStorage();

function toSaveChange(event){
    if(toSave.checked ){
        f.addEventListener("change",saveLocal);
        saveAll();
    }else{
        f.removeEventListener("change",saveLocal);
        localStorage.clear();
    }
}

function saveLocal(event){
    var el = event.target;
    saveLocalElement(el);
}
function saveLocalElement(el){
   localStorage.setItem(el.name,el.value);
}
function saveAll(){
    for(var i=0;i<texts.length;i++){
        saveLocalElement(texts[i]);
    }
}

function loadFromStorage(){
    if (!toSave.checked) {return;}
    for(var i=0;i<texts.length;i++){
        texts[i].value= localStorage.getItem(texts[i].name) ;
    }
}

הוספתי את הפקד של השמירה - checkbox
למה בפתרון שלך הוא לא שמר גם אותו - הכנסתי אותו בתוך הform

label>Save</label>
            <label class="switch">
                <input type="checkbox" checked name="toSave">
                <span class="slider round"></span>
            </label>

חסרים פרטים בכל השאלות שלך…

בשאלה הראשונה - מה הודעת השגיאה המדויקת?

בשאלה השניה - אין בקוד שום מנגנון ששומר את כל המידע של הטופס. להיפך, הקוד מתיחס ספציפית לאלמנט input. האם עדכנת גם את הקוד? תוכל להדביק כאן קודפן שלך עם הקוד המעודכן?