CODEWITHSUNDEEP
javascripthtmlformsweblocal-storage
Learner33
Learner33

Reputation: 131

Store ALL user input onto Local-Storage

Im currently working with forms and saving the data on Local Storage.

my form is ->

<form id="formy">
<input class="add" id="num1">
<select class="add" id"num2">
 <option value="act1"> Try </option>
 <option value="act2"> Try2 </option>
<input class="add" id="num3">
<input class="add" id="num4">
</form>

I have 3 inputs and 1 select, I'm able to store the first input, i would like to store in the array ["Hi", "Try2", "LoveCode", "LY"]

But I only get ["Hi"] the first input stored only.

heres js code

const myForm = document.getElementById("formy");

    myForm.addEventListener("submit", addTodo);


function addTodo(e) {
        e.preventDefault();
        const userInput = document.querySelector("add").value;
        const userListItem = document.createElement("li");
        userListItem.appendChild(document.createTextNode(userInput));
        list.appendChild(userListItem);
        const myArray = map(listItems, getText);
        localStorage.setItem('titols', JSON.stringify(myArray));
    }

    const listItems = document.getElementsByTagName('li');


    function map(arrayLike, fn) {
        var ret = [], i = -1, len = arrayLike.length;
        while (++i < len) ret[i] = fn(arrayLike[i]);
        return ret;
    }

Upvotes: 0

Views: 53

Answers (2)

Gustavo A Olmedo
Gustavo A Olmedo

Reputation: 575

The first thing you need to know is that when you are using document.querySelector("add") you are looking for an element called "add" if you want to get an element with a class called "add" you should add a dot before ".add" if you want to get an element using its id you should use a hash before "#add".

Another thing you need to know about querySelector is that only brings the first element. In order to fix that you can use the document.getElementsByClassName() instead (Be aware that here we don't need to add a dot to be able to get the elements with the same class name). The "getElementsByClassName" will return a HTMLCollection, to fix this we can use the map function, and your code will be like this:

function addTodo(e) {
    e.preventDefault();
    // const userInput = document.querySelector("add").value;
    const userInputHTMLCollection = document.getElementsByClassName('add');
    const userInput = [].map.call(userInputHTMLCollection, element => element.value);
    const userListItem = document.createElement("li");
    userListItem.appendChild(document.createTextNode(userInput));
    list.appendChild(userListItem);
    const myArray = map(listItems, getText);
    localStorage.setItem('titols', JSON.stringify(myArray));
}

You need to know that if you run that in isolation, you will have an error because 'list' and 'getText' are undefined. I hope I have helped you anyway.

Upvotes: 2

Andr&#233;s Mu&#241;oz
Andr&#233;s Mu&#241;oz

Reputation: 579

This function:

const listItems = document.getElementsByTagName('li');

Returns a node list. In order to map you need to transform it into an array.

const listItems = Array.from(document.getElementsByTagName('li'));

Upvotes: 0

Related Questions