Создание приложения Todo на ванильном JavaScript от начала до конца

Создание приложения Todo на ванильном JavaScript от начала до конца | EP4: Добавление задач

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Эпизоды

В этом эпизоде Создание ванильного приложения JavaScript Todo от начала до конца мы начинаем добавлять в наше приложение необходимый код JavaScript. Начнем реализовывать логику, необходимую для добавления новых задач в список. Поэтому нам нужно обработать событие отправки формы и сгенерировать соответствующий вывод списка.

Перейдите в app.js и прежде всего добавьте и отправьте функцию обработчика событий для типа события отправки формы, добавив следующую строку кода:

// Selectors
document.querySelector('form').addEventListener('submit', handleSubmitForm);

Здесь мы используем метод document.querySelector для получения ссылки на элемент формы. Затем мы вызываем addEventListener, чтобы зарегистрировать функцию обработчика событий handleSubmitForm для обработки события отправки формы.

Функция handleSubmitForm еще не существует, поэтому нам нужно реализовать эту функцию на следующем шаге:

// Event Handlers
function handleSubmitForm(e) {
    e.preventDefault();
    let input = document.querySelector('input');
    if (input.value != '')
        addTodo(input.value);
    input.value = '';
}

Внутри этой функции мы сначала убеждаемся, что поведение браузера при отправке формы по умолчанию не имеет места, вызывая e.preventDefault(). Затем мы получаем ссылку на элемент ввода, снова используя метод querySelector. Мы сохраняем ссылку на этот элемент в input, чтобы мы могли получить доступ к входному значению с помощью input.value.

Если входное значение не пусто, вызывается вспомогательная функция addTodo, и текущее входное значение передается в эту функцию в качестве параметра.

Наконец, входное значение сбрасывается в пустую строку.

Давайте также реализуем вспомогательную функцию addTodo:

// Helpers
function addTodo(todo) {
    let ul = document.querySelector('ul');
    let li = document.createElement('li');
    li.innerHTML = `
        <span class="todo-item">${todo}</span>
        <button name="checkButton"><i class="fas fa-check-square"></i></button>
        <button name="deleteButton" ><i class="fas fa-trash"></i></button>
    `;
    li.classList.add('todo-list-item');
    ul.appendChild(li);
}

Прежде всего извлекается ссылка на элемент ul. Затем создается новый элемент li с помощью метода document.createElement. Этот новый элемент хранится в переменной li. Это элемент списка, который содержит вывод, который выполняется для каждого элемента задачи. Поэтому мы вставляем внутренний HTML-код элемента li, назначая строку кода свойству innerHTML элемента li.

Вывод состоит из текста todo, кнопки проверки и кнопки удаления.

Наконец, новый элемент li добавляется в качестве дочернего элемента к элементу ul, чтобы он стал видимым в браузере.

Что дальше

В следующем эпизоде мы собираемся завершить приложение todo на JavaScript, добавив функции проверки и удаления.

Создание приложения Todo на ванильном JavaScript от начала до конца | EP4: Добавление задач

Создание приложения Todo на ванильном JavaScript от начала до конца | EP4: Добавление задач

Что дальше

Рекомендация курса JavaScript

Похожие вопросы