Question

我目前正在使用表单并将数据保存在本地存储中。

我的表单是->

<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个选择，我能够存储第一个输入，我想存储在数组中 [“嗨”，“ 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”的元素。如果要使用其ID获得元素，则应在“ .add”之前添加一个点，应在“ #add”之前使用哈希。

关于querySelector您需要了解的另一件事是仅带来第一个元素。为了解决这个问题，您可以改用document.getElementsByClassName（）（请注意，这里我们不需要添加点就能获取具有相同类名的元素）。 “ getElementsByClassName”将返回HTMLCollection，要解决此问题，我们可以使用map函数，您的代码将如下所示：

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

此功能：

<access>

返回节点列表。为了映射，您需要将其转换为数组。

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

将所有用户输入存储到本地存储中

2 个答案: