0

для практики пишу Todo app и не получилось написать один скрипт. На просторах интернета нашел готовое решение - делать через onClick, а не addEventListener.

'use strict';

const input = document.querySelector('.todo-input');
let count = 0,
    todoAmount = 0;

document.querySelector('.items-left').textContent = `${todoAmount} items left`;

class TodoConstructor {
    constructor(input, parentSelector) {
        this.value = input.value;
        this.parent = document.querySelector(parentSelector);
    }

    
    render() {
        if (document.querySelector('.text-container')) {
            document.querySelector('.text-container').style.display = 'none';
        }
        
        const newTodo = document.createElement('div');
        newTodo.classList.add('new-todo-container', 'new-container');

        newTodo.innerHTML = `
            <div class="checkbox-wrapper">
                <input type="checkbox" id="new-todo-${todoAmount}"  name="inputs" class="custom-checkbox">
                <label for="new-todo-${todoAmount}">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="9">
                    <path fill="none" stroke="#FFF" stroke-width="2" d="M1 4.304L3.696 7l6-6"/>
                <svg>
                </label>
            </div>
            <span class="todo-text">${this.value}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="close close-enable"><path d="M16.97 0l.708.707L9.546 8.84l8.132 8.132-.707.707-8.132-8.132-8.132 8.132L0 16.97l8.132-8.132L0 .707.707 0 8.84 8.132 16.971 0z"/></svg>
        `;
        this.parent.prepend(newTodo);
        countAllTodos();
        
        
    }
}

function checkEmptyInput() {
    input.addEventListener('input', () => {
        if (input.value == '') {
            document.querySelector('.new-todo-container').style.border = '1px solid red';
        } else {
            document.querySelector('.new-todo-container').style.border = '1px solid hsl(0, 0%, 90%)';
        }
    });
}

function checkForEmptyContent() {
    const contentContainer = document.querySelector('.content-container');
    contentContainer.addEventListener('click', () => {
        if (!document.querySelectorAll('.close-enable').length) {
            document.querySelector('.text-container').style.display = 'flex';
        } 
    });
}

function createNewTodo() {
    input.addEventListener('keydown', (e) => {
        if (e.code === "Enter" && input.value !== '') { 
            ++todoAmount;
            console.log(todoAmount);
            new TodoConstructor(input, '.content-container').render();
            input.value = '';
            checkForEmptyContent();
            deleteBtnClick();
            // bindTodoDelete();
        }
    });
}

// Первый способ - неправильно считает общее кол-во задач
function bindTodoDelete() {
    const deleteBtns = document.querySelectorAll('.close-enable');
    --todoAmount;
    for (let i = 0; 0 < deleteBtns.length; i++) {
        deleteBtns[i].addEventListener('click', (e) => {
            if (e.target.tagName == 'svg') {
                e.target.parentElement.remove();
            } else {
                const parent = e.target.parentElement;
                parent.parentElement.remove();
            }
        });
        countAllTodos();
    }
    
}

// Второй способ - правильно считает кол-во задач
function deleteBtnClick(){
    const deleteBtns = document.getElementsByClassName("close-enable");
    var j;
    for( j = 0; j < deleteBtns.length; j++){
        deleteBtns[j].onclick = function() {
            const parent = this.parentElement;
            parent.remove();
            --todoAmount;
            countAllTodos();
        }; 
    }
}

function countAllTodos() {
    document.querySelector('.items-left').textContent = `${todoAmount} items left`;
}



createNewTodo();
checkEmptyInput();
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <title>Frontend Mentor | Todo app</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    

  </style>
</head>
<body>
  <div class="button" id="btn">click me</div>
  <div class="button" id="btnn">click me tool</div>
  <div class="main-container">
    <div class="header-container">
      <h1 class="header">todo</h1>
      <div class="change-theme"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path fill="#FFF" fill-rule="evenodd" d="M13 0c.81 0 1.603.074 2.373.216C10.593 1.199 7 5.43 7 10.5 7 16.299 11.701 21 17.5 21c2.996 0 5.7-1.255 7.613-3.268C23.22 22.572 18.51 26 13 26 5.82 26 0 20.18 0 13S5.82 0 13 0z"/></svg></div>
    </div>
    <div class="new-todo-container input-container">
        <div class="checkbox-wrapper">
          <input type="checkbox" id="new-todo-checkbox"  name="inputs" class="custom-checkbox">
          <label for="new-todo-checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="9"><path fill="none" stroke="#FFF" stroke-width="2" d="M1 4.304L3.696 7l6-6"/></svg></label>
        </div>
        <input class="todo-input" type="text" id="new-todo-text" name="inputs" placeholder="Create a new todo...">
    </div>
    <div class="content-container">
      <div class="new-todo-container text-container">
        <div class="checkbox-wrapper">
          <input type="checkbox" id="new-todo-ex"  name="inputs" class="custom-checkbox" disabled>
          <label for="new-todo-ex">
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="9">
              <path fill="none" stroke="#FFF" stroke-width="2" d="M1 4.304L3.696 7l6-6">
              </svg>
          </label>
        </div>
        <span class="todo-text unselectable">Here your todo will be displayed</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="close close-disabled"><path d="M16.97 0l.708.707L9.546 8.84l8.132 8.132-.707.707-8.132-8.132-8.132 8.132L0 16.97l8.132-8.132L0 .707.707 0 8.84 8.132 16.971 0z"/></svg>
      </div>
      <div class="footer-container">
        <div><span class="items-left"></span></div>
        <ul class="footer-states">
          <li class="footer-item all-items">All</li>
          <li class="footer-item items-active">Active</li>
          <li class="footer-item items-completed">Completed</li>
        </ul>
        <div class="clear-btn-wrapper">
          <button class="footer-item clear-btn">Clear Completed</button>
        </div>
      </div>
    </div>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>
  <script src="script.js"></script>
</body>
</html>

Я не знал какой именно участок кода нужен, поэтому вставил весь JS и HTML. Основная проблема, непонятная мне:

  • Почему первая функция bindTodoDelete при удалении задач со страницы неправильно считает общее кол-во оставшихся задач, но в то же время вторая deleteBtnClick отрабатывает нормально. Я предположил, что это из-за метода forEach, но не могу полностью понять в чем моя ошибка. Если нужны будут дополнения, то я обязательно дополню вопрос. Если есть прочие правки и комментарии по коду, то буду очень рад выслушать. Спасибо!
2
  • 1
    Отличия подходов. То есть в первом случае вы каждый раз добавляете точно такую же функцию, которая выполняется со всеми уже добавленными..... Однако влияния на работу я не нашёл 11 фев 2021 в 21:17
  • А чего у вас --todoAmount; в одном случае в теле цикла, а в другом нет ?
    – Lukas
    11 фев 2021 в 23:18

1 ответ 1

1

в функции bindTodoDelete - СРАЗУ при вызове идёт декремент --todoAmount; Т.е. как вы только вызвали функцию bindTodoDelete - переменна todoAmount сразу уменьшилась на 1 (хотя судя по коду это не нужно). А в самом onClick работы с переменной todoAmount нет

в функции deleteBtnClick - идёт инициализация событий click. И уже при событии click идёт работа с переменной todoAmount

так что в данном случае нет разницы между addEventListener и onclick. Просто декремент переменной не там вызывается.

2
  • "так что в данном случае нет разницы " --- а в целом-то отличия есть? и в чём? думаю в этом тоже был смысл поста) 12 фев 2021 в 6:50
  • ну я же написал, что в событии нет разницы! а вот декремент(todoAmount) в разных функциях вызывается в разных местах. Вопрос был в том, почему код работает по разному 12 фев 2021 в 7:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.