Почему функция addTask() не работает?

Функция addTask() работает правильно, он за одним исключением. Она создает лишь только один элемент в ту-ду листе, а дальше просто меняется ее значение при попытке добавить еще один. Вот скриншоты и код:
5f9d84c7c6bcc766715190.png
5f9d84fabf75f597544901.png
5f9d85016869e399284789.png
5f9d850847e84491565391.png

<body>
	<div id="container">
		<h1>ЗАДАЧИ</h1>
		<input id="input_task" type="text" width="100%" placeholder="Введите задачу">
		<input id="button_add" type="button" value="+" onclick="addTask()">

		<ul id="list_task">
			<!-- тут создаются задачи -->
		</ul>
	</div>

	<script src="js/script.js"></script>
</body>


//подтягиваю DOM элементы
const containerEl = document.getElementById('container');
const list_taskEl = document.getElementById('list_task');
const button_addEl = document.getElementById('button_add');

//создание задачи по нажатию на клавишу интер
document.addEventListener('keydown', (event) => {
    if (event.keyCode === 13) {
        addTask();
        clearInput();
    }
})

//функция очистки инпута
function clearInput() {
    input_taskEl = document.getElementById('input_task').value = "";
}

//вот эта функция не работает. Она должна создавать новую задачу, но она не работает
function addTask() {
    const input_taskEl = document.getElementById('input_task').value;

    let task = list_taskEl.innerHTML = `<div class="wrapper_li">
                                            <li>${input_taskEl}</li>
                                            <div class="buttons">
                                                <button><i class="fa fa-edit"></i></button>
                                                <button><i class="fa fa-close"></i></button>
                                            </div>
                                        </div>`
    list_taskEl.appendChild(task);
}
  • Вопрос задан
  • 115 просмотров
Решения вопроса 2
Здравствуйте!
Надеюсь, я правильно смогу объяснить почему ваша функция не работает.
Во-первых, следует понять, что нужно сделать в функции:
  1. Получить текущее значение в input
  2. Создать разметку для нового таска, где важный элемент – текст из input
  3. Вставить новый элемент в ul. list_task и очистить input


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

Когда новый элемент добавляется, активируется функция addTask.

  1. Внутри вы получаете значение, находящееся внутри input
  2. Создаете переменную и присваиваете ей list_taskEl куда в свою очередь записываете разметку нового элемента с текстом. Таким образом, даже если вы уберёте list_taskEl.appendChild(task) всё будет работать. Но не так, как вы хотели бы.


Возникает вопрос, что делать? Ответ таков: следует переработать код в самой функции addTask, пропуская лишь строчку, где получаете значение.

Чтобы сразу не давать ответ, как вообще можно это решить, я оставлю вам ссылку на интересную статью, которая поможет: insertAdjacentHTML.

Ниже под Spoiler оставлю, как я переработал ваш код. На случай, если всё же захочется посмотреть

Spoiler
//создание задачи по нажатию на клавишу интер
document.addEventListener('keydown', (event) => {
  if (event.code === "Enter") {
    addTask();
    clearInput();
  }
})

//функция очистки инпута
function clearInput() {
  input_taskEl = document.getElementById('input_task').value = "";
}

const templateTask = (text) => {
  return `
    <li class="task">
      <h2 class="task__title">${text}</h2>
      <div class="task__buttons">
        <button class="task__button><i class="fa fa-edit"></i></button>
        <button class="task__button><i class="fa fa-close"></i></button>
      </div>
    </li> 
  `
}

const addTask = () => {
  const input_taskEl = document.getElementById('input_task').value;

  const template = templateTask(input_taskEl);

  list_taskEl.insertAdjacentHTML('beforebegin', template);
  clearInput();
}
Ответ написан
dyuriev
@dyuriev
A posteriori
//вот эта функция не работает. Она должна создавать новую задачу, но она не работает
function addTask() {
    const input_taskEl = document.getElementById('input_task').value;
    var task = document.createElement('div');
    task.classList.add('wrapper_li');
    task.innerHTML = `
<li>${input_taskEl}</li>
<div class="buttons">
    <button><i class="fa fa-edit"></i></button>
    <button><i class="fa fa-close"</i></button>
</div>`;
                                           
    list_taskEl.appendChild(task);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽
27 нояб. 2020, в 21:06
1000 руб./за проект
27 нояб. 2020, в 20:46
600 руб./за проект
27 нояб. 2020, в 20:44
5000 руб./за проект