Как вывести данные из дочернего input на страницу?

Question

Есть input и кнопка btnAdd. При вводе в input и нажатии кнопки add создается div с введенным значением из input + еще одним инпутом и кнопкой "add". При вводе нового текста в новый input и нажатии кнопки добавить должен добавляться новый текст. <p>?

Код на codepen

Вот код:

const listTodo = document.querySelector('.container_todos');
const input = document.querySelector('.input_todo');
const btnAdd = document.querySelector('.btn');

btnAdd.addEventListener('click', addTask);

function createToDo() {
  const card = document.createElement('div');
  card.classList.add('card');
  card.innerHTML = `
    <h3>${input.value}</h3>
    <button class="btn_del_task">Delete task</button><br>
    <div class="sub-container">
      <input type="text" name="search" id="new-input" placeholder="add new"/>
      <button class="btn_add_new">add new</button>
      <p>сюда текст с инпута 2</p>
    </div>`;

  listTodo.appendChild(card);
  card.addEventListener('click', cardRemove);
  return card;
}

function addTask() {
  let newTask = createToDo(input.value);
  listTodo.appendChild(newTask);
};

const delCard = document.querySelector('.btn_del_task')
const cardRemove = (e) => {
  if (e.target.classList.contains('btn_del_task')) {
    e.target.parentElement.remove();
  }
}

let newInput = document.querySelector('.new-input');
let btnAddNew = document.querySelector('.btn_add_new');
let subContainer = document.querySelector('.sub-container');

<input type="text" name="input-todo" id="input-todo" class="input_todo" placeholder="write something">
<button class="btn" id="add">Add</button>
<div class="container_todos"></div>

Answer 1

Как и на btnAdd вы вешаете .addEventListener, так же и на кнопку "add new" нужно вешать новый обработчик.

const listTodo = document.querySelector('.container_todos');
const input = document.querySelector('.input_todo');
const btnAdd = document.querySelector('.btn');

btnAdd.addEventListener('click', addTask);

function createToDo() {
  const card = document.createElement('div');
  card.classList.add('card');
  card.innerHTML = `
    <h3>${input.value}</h3>
    <button class="btn_del_task">Delete task</button><br>
    <div class="sub-container">
      <input type="text" name="search" class="new-input" placeholder="add new"/>
      <button class="btn_add_new">add new</button>
      <p class="new-output">сюда текст с инпута 2</p>
    </div>`;

  listTodo.appendChild(card);
  card.addEventListener('click', e => {
    let target = e.target;
    // remove
    if(target.classList.contains('btn_del_task')) {
      target.closest('.card').remove();
    }
    // add new
    if(target.classList.contains('btn_add_new')) {
      let parent = target.closest('.sub-container'),
          input = parent.querySelector('.new-input'),
          output = parent.querySelector('.new-output');
      output.innerText = input.value;
    }
  });
  return card;
}

function addTask() {
  let newTask = createToDo(input.value);
  listTodo.appendChild(newTask);
};

const delCard = document.querySelector('.btn_del_task');

let newInput = document.querySelector('.new-input');
let btnAddNew = document.querySelector('.btn_add_new');
let subContainer = document.querySelector('.sub-container');

<input type="text" name="input-todo" id="input-todo" class="input_todo" placeholder="write something">
<button class="btn" id="add">Add</button>
<div class="container_todos"></div>

БЛОГ НА HUSL

Как вывести данные из дочернего input на страницу?

Ответы (1 шт):