добавить зачеркивание для динамически создаваемых списков - PullRequest
Новая
       53

добавить зачеркивание для динамически создаваемых списков

0 голосов
/ 29 мая 2020

Я могу сделать так, чтобы li, созданный в моем html файле, пропускался при нажатии, но я не могу заставить его работать динамически созданные ... Любые советы были бы очень признательны! 

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do</title>
    <link rel="stylesheet" href="todo.css">
    <script src="https://kit.fontawesome.com/ff289d152e.js" crossorigin="anonymous"> 
    </script>
    </head>
<body>

        <div class="container">
        <h1>To be done</h1>
            <input id="add-todo" type="text" placeholder="What do you have to do?">
        <ol id="tasks">
            <li>
               This one works <i class="fas fa-trash-alt"></i>
            </li>
        </ol> 
    </div>
<script type="text/javascript" src="todo.js"></script>   
</body>
</html>

html {
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
}
body{
    font-family: 'Raleway';
    background: url(https://i.gyazo.com/9024e4cc2d29408dd08bd67a54b355c8.png);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    background-color: gray;
    margin: 10px;
    padding: 10px;
}

Добавить этот стиль при щелчке ... 

.completed {
    text-decoration: line-through;
}

i {
    margin-left: 20px;
}

let addTaskField = document.getElementById('add-todo');
let tasks = document.getElementById('tasks');
let todos = document.querySelectorAll("li");




// create a todo
addTaskField.addEventListener('keypress', function(event){
if(event.which === 13 && this.value != ''){
    let li = document.createElement("li");
    let i = document.createElement("i");
    i.classList = "fas fa-trash-alt";
    li.innerHTML = this.value;
    li.appendChild(i);
    tasks.append(li);
    this.value = '';
}
});

Можно ли просто выбрать все списки, даже если они созданы позже, и l oop через них, добавив прослушиватель событий? 

// add strikethrough
todos.forEach(function(todo) {
    todo.addEventListener('click', function() {
        this.classList.toggle('completed');
    });
})

1 Ответ

0 голосов
/ 29 мая 2020

Если вы проверите свою переменную 'todos', в ней всегда будет только один элемент 'li'. Неважно, сколько новых задач вы добавите. Это связано с тем, что значение todos (s) обновляется, когда страница загружается в первый раз.

Все, что я сделал, это добавил прослушиватель событий перед добавлением 'li' get. Это не самое элегантное решение, но оно работает. Если вы запустите это, вы заметите, что он работает только для динамически создаваемых элементов. 

let addTaskField = document.getElementById('add-todo');
let tasks = document.getElementById('tasks');
let todos = [];

// create a todo
addTaskField.addEventListener('keypress', function(event){
if(event.which === 13 && this.value != ''){
    let li = document.createElement("li");
    let i = document.createElement("i");
    i.classList = "fas fa-trash-alt";
    li.innerHTML = this.value;
    li.appendChild(i);
    li.addEventListener('click', function() {
        this.classList.toggle('completed');
    })
    tasks.append(li);
    todos = document.querySelectorAll("li");
    this.value = '';
}
});
...