將所有用戶輸入存儲到本地存儲中

Question

我目前正在使用 forms 並將數據保存在本地存儲中。

我的表格是->

<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>

我有 3 個輸入和 1 個 select，我能夠存儲第一個輸入，我想存儲在數組中 [“Hi”、“Try2”、“LoveCode”、“LY”]

但我只得到 ["Hi"] 僅存儲的第一個輸入。

這是js代碼

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;
    }

Answer 1

您需要知道的第一件事是，當您使用 document.querySelector("add") 時，您正在尋找一個名為“add”的元素，如果您想獲取一個名為“add”的 class 的元素，您應該添加一個點在“.add”之前，如果你想使用它的 id 來獲取一個元素，你應該在“#add”之前使用 hash。

關於 querySelector 你需要知道的另一件事是它只帶來第一個元素。 為了解決這個問題，您可以使用 document.getElementsByClassName() 代替（請注意，在這里我們不需要添加一個點來獲取具有相同 class 名稱的元素）。 “getElementsByClassName”將返回一個 HTMLCollection，為了解決這個問題，我們可以使用 map function，您的代碼將如下所示：

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));
}

你需要知道，如果你單獨運行它，你會遇到錯誤，因為'list'和'getText'是未定義的。 無論如何，我希望我對你有所幫助。

Answer 2

這個 function：

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

返回一個節點列表。 為了 map 您需要將其轉換為數組。

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