I can't seem to correct the error the console is talking about can anyone help me. My code is below. I created a web form that saves the data to local storage and displays it on screen then deletes all the stored data if we want. But for some reason it won't take the data from the form at all.
// Wait until the DOM is ready window.addEventListener("DOMContentLoaded", function (){// getElementById functionfunction $(x) {var theElement = document.getElementById(x);return theElement;} // end theElement functionfunction makeCats () {var formTag = document.getElementsByTagName("form"), // form tag is an arrayselectListItem = $('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 loopselectListItem.appendChild(makeSelect);} // end makeCat functionfunction 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 functionfunction getcheckedBoxBtn() {if($('fav').checked) {favoriteValue = $('fav').value;} else {favoriteValue = "No"}} // end functionfunction toggleControls(a) {switch(a){case "on":$('noteForm').style.display = "none"$('clear').style.display = "inline"$('displayLink').style.display = "none"breakcase "off":$('noteForm').style.display = "block"$('clear').style.display = "inline"$('displayLink').style.display = "inline"$('items').style.display = "none"breakdefault: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 functiongetcheckedBoxBtn();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 functionfunction 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 functionfunction 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 functionBest Answer
There are errors here :
var formTag = document.getElementsByTagName("form"), // form tag is an arrayselectListItem = $('select'),makeSelect = document.createElement('select'),makeSelect.setAttribute("id", "groups");The code must change to:
var formTag = document.getElementsByTagName("form");var selectListItem = $('select');var makeSelect = document.createElement('select');makeSelect.setAttribute("id", "groups");By the way, there is another error at line 129 :
var createLi.appendChild(createSubList);Replace it with:
createLi.appendChild(createSubList);The uncaught syntaxerror unexpected identifier error occurs in JavaScript when an unexpected identifier is encountered. This error typically occurs when there is a mistake in the syntax of the code. Identifiers are used to name variables, functions, and objects in JavaScript. They must follow certain rules, such as starting with a letter, underscore, or dollar sign, and can contain letters, numbers, underscores, or dollar signs.
To fix this error, carefully review the code and check for any missing or extra characters, such as parentheses, braces, or semicolons. Make sure that all identifiers are properly defined and used. It is also important to check for any typos or spelling mistakes in the identifiers. Additionally, consider using a code editor or integrated development environment (IDE) with syntax highlighting and error checking features to help identify and fix syntax errors.
It is also a good practice to use proper indentation and formatting in the code to make it more readable and easier to spot syntax errors. Commenting the code can also be helpful in understanding and debugging the code. If the error persists, try searching for the error message or specific code snippet online to see if others have encountered similar issues and find potential solutions.
Remember that syntax errors are common in programming and are usually easy to fix once identified. They are part of the learning process and can help improve your programming skills. Take your time to understand the error message and analyze the code to find the cause of the error. With practice and experience, you will become better at debugging and avoiding syntax errors in your code.