Как получить одно значение из NodeList - PullRequest
Новая
       12

Как получить одно значение из NodeList

0 голосов
/ 08 февраля 2019

Помогите мне получить одно значение из Item из NodeList.Я хочу отобразить два NodeLists на массив объектов.Я хочу создать форму, которая добавляет новую книгу в библиотеку с функцией, которая динамически помещает нового автора, имя и фамилия строки в форму.Но я не могу понять, как получить входные данные из дополнительных строк в объект JSON.Я нашел только это решение, но не могу понять, как получить одно значение из querySelectorAll NodeList, а затем создать объект автора.Я хочу взять объект, подобный этому: 

    const newBook = {
        title: 'title',
        year: '2000',
        authors: [{
               firstName: 'Name',
               lastName: 'LastName'
}]
    };

Я хочу взять объект, подобный этому: 

function Author(firstName, lastName) {
    this.firstname = firstName;
    this.lastname = lastName;
}
const authors = Object.create(null);
const $author = document.querySelector('#formAuthor');
const firstName = [$author.querySelectorAll("#firstName")];
const lastName = [$author.querySelectorAll('#lastName')];
for (let i = 0; i < firstName; i++) {
   let author = new Author(firstName[i], lastName[i]); //here

    authors.push(author);

Вот HTML 

<div id="createForm" class="modal modal-fixed-footer">
    <div class="modal-content">
        <h4>Add new book</h4>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input placeholder="title" id="formTitle" type="text" class="validate">
                        <label for="formTitle">title</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="formYear" type="text" class="validate">
                        <label for="formYear">year</label>
                    </div>
                    <div class="input-field col s6 author" id="formAuthor">
                    </div>
                    <div class="input-field col s6 genre" id="formGenre">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <div class="valign-wrapper leftBottom">
        <a class="waves-effect waves-light btn-small" id="createBook">Save</a>
        </div>
            <div class="fixed-action-btn">
            <a class="btn-floating btn-large red">
                <i class="large material-icons">mode_edit</i>
            </a>
            <ul>
                <li><a class="btn-floating blue" id="addAuthor"><i class="material-icons">person_add</i></a></li>
                <li><a class="btn-floating yellow darken-1" id="addGenre"><i class="material-icons">library_books</i></a></li>
            </ul>
        </div>
    </div>
</div>

Добавление дополнительной строки

function onCreateBookAddAuthorRow() {
    let $authorRow = document.createElement('div');
    let count = $author.childElementCount;
    $authorRow.className = 'authorRow';
    $authorRow.innerHTML = `<div class="row" id="authorRow-${count}">
        <div class="input-field col s6">
          <input id="firstName" type="text" class="validate">
          <label for="firstName">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="lastName" type="text" class="validate">
          <label for="lastName">Last Name</label>
        </div>
        <a class="waves-effect waves-teal btn-flat" id="deleteAuthor-${count}">delete</a>
      </div>`;
    $author.appendChild($authorRow);

    document.querySelector('#deleteAuthor-' + count).addEventListener('click', function () {
        $author.removeChild($author.lastChild)
    });
}

1 Ответ

0 голосов
/ 08 февраля 2019

Для начала, у вас не должно быть нескольких элементов с одинаковым идентификатором в HTML

. Вы можете использовать Array.from() или оператор распространения ... для преобразования NodeList в Array, как показано ниже 

// consider converting the ID to a class like so,
const firstName = Array.from($author.querySelectorAll(".firstName"));
const lastName = Array.from($author.querySelectorAll('.lastName'));

// now if it div you might want to take the innerText or innerHTML to get the values. For input types use .value

for (let i = 0; i < firstName; i++) {
   let author = new Author(firstName[i].innerText, lastName[i].innerText);
...