Не срабатывает фуннкция очистки onClear

262
13 февраля 2018, 09:43

Привет, есть код, при нажатии на кнопку "Clear" должны очиститься все элемент в списке, что у меня не так?

let tasks = [ 
    "Выучить JavaScript", 
    "Выучить Angular 4", 
    "Выучить React" 
]; 
  
let ul = document.querySelector('.list-group'); 
let form = document.forms['addTodoItem']; 
let addInput = form['todo']; 
let clearBtn = document.querySelector('.clear-list'); 
  
  
  
function listTemplate(task) { 
    //create tag li 
    let li = document.createElement('li'); 
    li.innerText = task; 
    li.className = 'list-group-item d-flex'; 
    //create tag i 
    let i = document.createElement('i'); 
    i.className = 'fas fa-trash-alt ml-auto remove-list-item removeBtns'; 
    //append i to li 
    li.appendChild(i); 
    //return element i 
    return li; 
} 
  
let removeBtns = document.getElementsByClassName('removeBtns'); 
  
function generateList(tasksArray) { 
    clearList(); 
  
    for ( let i = 0; i < tasksArray.length; i++){ 
        let liTemplate = listTemplate(tasksArray[i]); 
        ul.appendChild(liTemplate); 
    } 
  
    setListeners(); 
} 
  
function addTask(string) { 
    if ( !string || typeof string !== 'string') return new Error('Не передана строка'); 
    if ( !string.length ) return new Error('Строка не должна быть пустой'); 
  
    tasks.unshift(string); 
  
    generateList(tasks); 
} 
  
function clearList() { 
    ul.innerHTML = ''; 
} 
  
function editTask(task, updtask) { 
  
    let currentTask = tasks.indexOf(task); 
    tasks[currentTask] = updtask; 
    generateList(tasks); 
  
  
} 
  
function deleteTask(task) { 
    let currentTask = tasks.indexOf(task); 
    console.log(currentTask, task.length, task); 
  
    if( currentTask !== -1){ 
        tasks.splice(currentTask, 1); 
        ul.children[currentTask].remove(); 
    } else { 
        console.warn('Задача не обнаружена'); 
    } 
} 
  
function setListeners() { 
  
    //set listeners at remove btns 
    for ( let i = 0; i < removeBtns.length; i++){ 
        removeBtns[i].addEventListener('click', function (e) { 
            let parent = this.closest('li'); 
            deleteTask(parent.textContent); 
        }); 
    } 
} 
  
function onSubmit(e) { 
    e.preventDefault(); 
  
    if ( !addInput.value ){ 
        addInput.classList.add('is-invalid') 
    } else { 
        addInput.classList.remove('is-invslid'); 
        addTask(addInput.value); 
        form.reset(); 
    } 
    console.dir(addInput); 
} 
  
function onClear(e) { 
    tasks = []; 
    ul.innerHTML = ''; 
} 
  
form.addEventListener('submit', onSubmit); 
  
clearBtn.addEventListener('submit', onClear); 
  
  
//Генерация списка при загрузке страницы 
generateList(tasks);
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
</head> 
<body> 
<section class="todo-list-wrapper mt-5"> 
    <div class="container"> 
        <div class="card mb-3"> 
            <div class="card-header"> 
                Add todo 
            </div> 
            <div class="card-body"> 
                <form name="addTodoItem"> 
                    <div class="form-group"> 
                        <label for="todo">Text</label> 
                        <input type="text" class="form-control" id="todo"> 
                        <div class="invalid-feedback"> 
                            Please enter some text. 
                        </div> 
                    </div> 
                    <button type="submit" class="btn btn-primary btn-block">Add</button> 
                </form> 
            </div> 
        </div> 
        <div class="card"> 
            <div class="card-header"> 
                Todo list 
            </div> 
            <ul class="list-group list-group-flush"></ul> 
        </div> 
        <button class="btn btn-primary mt-3 clear-list">Clear</button> 
    </div> 
</section> 
  
<script src="main.js"></script> 
</body> 
</html>

Answer 1

почему на сабмит вешаете обработчик ? clearBtn - находится за формой

clearBtn.addEventListener('click', onClear);
READ ALSO
Закончить инструкции с видео
javascript

Закончить инструкции с видео

 167
как удалить пустой массив с обьекта
javascript

как удалить пустой массив с обьекта

Как можно удалить массив из объекта если этот массив пустой? Без использования es6

 240
Есть ли событие Telegram Api &ldquo; Вход нового пользователя в Channel &rdquo; или альтернатива реализации под Node.js
javascript

Есть ли событие Telegram Api “ Вход нового пользователя в Channel ” или альтернатива реализации под Node.js

Необходимо кидать сообщение от бота к новому пользователю, который зашел в Channel, не группу, не к самому боту,а именно в ChannelЕсть ли такое событие...

 203
Отправка формы JS
javascript

Отправка формы JS

Подскажите пожалуйста у меня есть задача Отправить форму из консоли бразуера n разнаписал скрипт, но если я вместо данных в data использую frm

 315