I can’t fix the error the console is talking about, can someone help me. My code is below. I created a web form that saves the data in local storage and displays it on the screen, and then deletes all the saved data if we want. But for some reason, it will not accept data from the form at all.
// Wait until the DOM is ready window.addEventListener("DOMContentLoaded", function (){ // getElementById function function $(x) { var theElement = document.getElementById(x); return theElement; } // end theElement function function makeCats () { var formTag = document.getElementsByTagName("form"), // form tag is an array selectListItem = $('select'), makeSelect = document.createElement('select'), makeSelect.setAttribute("id", "groups"); for(var i=0, j=notesCategories; i<j; i++) { var makeOption = document.createElement('option'); var optionText = notesCategories[i] makeOption.setAttribute("value", "optionText"); makeOption.innerHTML = optionText; makeSelect.appendChild(makeOption); } // end for loop selectListItem.appendChild(makeSelect); } // end makeCat function function getSelectedRadioBtn() { var radio = document.forms[0].favNote for (var i=0; i<radio.length; i++) { if(radio[i].checked) { favoriteValue = radio[i].value; } // end if } // end for loop } // end get selected radio btn function function getcheckedBoxBtn() { if($('fav').checked) { favoriteValue = $('fav').value; } else { favoriteValue = "No" } } // end function function toggleControls(a) { switch(a){ case "on": $('noteForm').style.display = "none" $('clear').style.display = "inline" $('displayLink').style.display = "none" break case "off": $('noteForm').style.display = "block" $('clear').style.display = "inline" $('displayLink').style.display = "inline" $('items').style.display = "none" break default: return false; } } function saveNotes() { var id = Math.floor(Math.random()*1000001); // gather up all form fields values and store them in an object // object properites will contain an array with form labels and input values getSelectedRadioBtn(); // calls function getcheckedBoxBtn(); var item = {} item.group = ["Group", $('groups').value ]; item.notetitle = ["Title", $('notetitle').value ]; item.noteinfo = ["Note", $('noteinfo').value ]; item.date = ["Date", $('date').value ]; item.items = ["Number of Itmes", $('items').value ]; item.attach = ["Attach a File", $('attach').value ]; item.favorite = ["Favorite Note", favoriteValue ]; // save data into local storage. Use stringify to convert our object to a string localStorage.setItem(id, JSON.stringify(item)); alert("Note Saved"); } // end store data function function getNotes() { toggleControls("on"); var makeDiv = document.createElement('div'); makeDiv.setAttribute("id", "items"); var createList = document.createElement('ul'); makeDiv.appendChild(createList) // puts createList into ul element created above document.body.appendChild(makeDiv) // attach makeDiv to the document $('items').style.display = "block"; for(i=0, entries=localStorage.length; i<entries; i++) { var createLi = document.createElement('li'); createList.appendChild(createLi); var key = localStorage.key(i); var value = localStorage.getItem(key); var savedNote = JSON.parse(value); // parse the save note object back into an object var createSubList = document.createElement('ul'); var createLi.appendChild(createSubList); for(a in savedNote) { var creatSubListItem = document.createElement('li'); createSubList.appendChild(creatSubListItem) var subText = savedNote[a][0] + " " + savedNote[a][1]; creatSubListItem.innerHTML = subText; } // end for in loop } // end for loop } // end getNotes function function clearNotes() { if(localStorage.length === 0){ alert("Move along buddy, nothing here to clear."); } else { localStorage.clear() alert("All notes are deleted"); window.location.reload(); return false; } // end if } // end clearNotes function // Variables defaults var notesCategories = ["--Choose a Category-- ","Grocery","Fitness","Entertainment","Dining","Shopping","Sports"], favoriteValue = "No"; makeCats(); // Set links and submits click events var displayLink = $('displayLink'); displayLink.addEventListener("click", getNotes); var clearLink = $('clear'); clearLink.addEventListener("click", clearNotes); var save = $('submit'); save.addEventListener("click", saveNotes); }) // end main function
markj287
source share