时间戳

首页 > 解决方案 > 创建表单元素

javascript - 创建表单元素

问题描述

我正在尝试创建一个表单，用户可以在其中填写他的全名输入。我创建了一个简单的表单，但该表单仅显示名字输入。我正在考虑完成任务的 forEach 方法，但没有正确理解如何完成它。还是我应该研究另一种方式？我也考虑过创建“第二名”和“第三名”元素，但这种方式不适合我。谢谢

const nameInput = document.querySelector('.name');
const button = document.querySelector('.button')
const lists = document.querySelector('.lists')

function addName(evt) {
    evt.preventDefault();
    const listItem = document.createElement('li');
    listItem.textContent = nameInput.value;
    lists.appendChild(listItem);
    nameInput.value = '';
}

button.addEventListener('click', addName);
    <form class="form">
        <input type="text" class="name" placeholder="Имя">
        <input type="text" class="name" placeholder="Фамилия">
        <input type="text" class="name" placeholder="Отчество">
        <button type="submit" class="button">ОК</button>
    </form>
    <div class="block">
        <ul class="lists"></ul>
    </div>

标签： javascripthtml

解决方案

如果您想在每次按下按钮时从表单中获取名称并列出它们的列表项，您可以使用querySelectorAll选择所有名称输入并遍历它们以获取名称。

const nameInputs = document.querySelectorAll('.name');
const button = document.querySelector('.button')
const lists = document.querySelector('.lists')

function addName(evt) {
    evt.preventDefault();
    const listItem = document.createElement('li');
    var names = []
    nameInputs.forEach(i =>{
      names.push(i.value);
      i.value = '';
    });
    listItem.textContent = names.join(' ');
    lists.appendChild(listItem);
}

button.addEventListener('click', addName);
<form class="form">
        <input type="text" class="name" placeholder="Имя">
        <input type="text" class="name" placeholder="Фамилия">
        <input type="text" class="name" placeholder="Отчество">
        <button type="submit" class="button">ОК</button>
    </form>
    <div class="block">
        <ul class="lists"></ul>
    </div>

推荐阅读