Как получить текст из инпута?

Question

[Esm322]

Как получить текст из инпута? Есть такой код:

function createAddBlock() {
  const $addBlock = document.createElement('div');
  const $selectContacts = document.createElement('select');
  const $phoneOption = document.createElement('option');
  const $additionalPhoneOption = document.createElement('option');
  const $emailOption = document.createElement('option');
  const $vkOption = document.createElement('option');
  const $twitterOption = document.createElement('option');
  const $selectInput = document.createElement('input');

  $addBlock.classList.add('add-contact__contacts');
  $selectContacts.classList.add('add-contact__select');
  $selectInput.classList.add('add-contact__input');

  $phoneOption.textContent = 'Телефон';
  $phoneOption.value = 'phone';
  $additionalPhoneOption.textContent = 'Доп. тел.';
  $additionalPhoneOption.value = 'additional-phone';
  $emailOption.textContent = 'Email';
  $emailOption.value = 'email';
  $vkOption.textContent = 'Vk';
  $vkOption.value = 'vk';
  $twitterOption.textContent = 'Twitter';
  $twitterOption.value = 'twitter';
  $selectInput.placeholder = 'Введите данные контакта';

  $selectContacts.append($phoneOption, $additionalPhoneOption, $emailOption, $vkOption, $twitterOption);
  $addBlock.append($selectContacts, $selectInput);

  return {
    $selectInput,
    $addBlock,
  };
}

Данная функция создает блок, которая впоследствии используется здесь:

$btnAddContact.addEventListener('click', () => {
  $btnAddContact.insertAdjacentElement('beforebegin', createAddBlock().$addBlock)
})

Мне нужно получить value у $selectInput, чтобы потом value отображался при рендере данных, здесь:

$form.addEventListener('submit', function (event) {
  event.preventDefault();

  const client = {
    id: getID(dataClients),
    name: $inputName.value.trim(),
    surname: $inputSurname.value.trim(),
    lastname: $inputLastname.value.trim(),
    createDate: new Date(),
    changesDate: new Date(),
    contacts: createAddBlock().$selectInput.value,
  }

  $inputName.value = '';
  $inputSurname.value = '';
  $inputLastname.value = '';
  createAddBlock().$selectInput.value = '';

  dataClients.push(client);

  renderClients();
})

Но к сожалению, value не отображается. Пытался вынести инпут в глобальную область видимости, но тогда переставало работать событие кликом с добавлением блока.

Answer 1

[Чипекве]

('beforebegin', createAddBlock().$addBlock)

contacts: createAddBlock().$selectInput.value,

createAddBlock().$selectInput.value = '';

Это три разных вызова функции, соответственно создаются 3 разных объекта, которые не связаны друг с другом.

$form.addEventListener('submit', function (event) {})

Здесь нужно искать нужный уже созданный элемент, чтобы получить его value.

Comments

[Esm322]

Подскажите, пожалуйста как найти или может статью или тему какую-нибудь прочитать. Я вывел в отдельную переменную

let contactsValue = createBlock().$selectInput.value;

И затем пытаюсь отследить, что выводит инпут
console.log(contactsValue);
Все в этом ивенте, но при пуше клиента в массив, log выводит пустое значение инпута

[Чипекве]

Esm322, этот .$selectInput нужно вставить в документ, прежде чем получать значение его value.

При этом вызов функции здесь - ('beforebegin', createAddBlock().$addBlock) и вызов здесь

let contactsValue = createBlock().$selectInput.value;

- это два совершенно разных вызова. То есть во втором случае создаётся отдельный блок, который никуда не помещается и поэтому value у его инпута пустое.

Вот этот возврат функции return { $selectInput, $addBlock } нужно переделать, чтобы он возвращал только элемент для вставки. А нужные инпуты уже искать отдельной функцией в обработчике 'submit' формы.

[Esm322]

Чипекве, Изменил возврат и вызов функции , теперь она возвращает только элемент:
return $addBlock
Добавил функцию в форму:

$form.addEventListener('submit', function (event) {
  event.preventDefault();

  function getSelectInputValue() {
    let res = null;
    let nodes = createBlock().childNodes;
    res = nodes[1].value;

    return res
  }
  console.log(getSelectInputValue());

  const client = {
    id: getID(dataClients),
    name: $inputName.value.trim(),
    surname: $inputSurname.value.trim(),
    lastname: $inputLastname.value.trim(),
    createDate: new Date(),
    changesDate: new Date(),
    contacts: getSelectInputValue(),
  }

  $inputName.value = '';
  $inputSurname.value = '';
  $inputLastname.value = '';

  dataClients.push(client);

  renderClients();
})

Но опять же, выводит пустое значение при пуше. Прописывал самостоятельно value для $selectInput в createBlock(), то его выводит в консоль. Возможно ошибка в childNodes, ведб он только для чтения?

[Чипекве]

Esm322, функция createBlock() создаёт блок каждый раз при её вызове. Вот тут:
let nodes = createBlock().childNodes;
получается, что блок создаётся, но никуда не вставляется. Вот этот вызов функции ↑ от не связан с вызовом во время создания блока. Это разные блоки.

Если нужно получить данные из переменной, нужно заранее заранее создать блок и записать её в переменную. Например:
const myBlock = createBlock();
А затем куда-то вставить: .insertAdjacentElement('beforebegin', myBlock)

Но, судя по коду такие создания и вставок должны происходить не один раз. То есть контакты могут добавляться несколько раз, так?

Проще создавать и вставить блок, но не писать его в переменную (вставить сразу в нужное место). А уже дальше в коде обработчика формы искать нужные блоки (а их, повторюсь, может быть много ):

const contactsBlocks = document.querySelectorAll('.add-contact__contacts');

И после этого обрабатывать contactsBlocks через .forEach() или превратить в массив и через .map().