主页 / 问题 / 1243007
Accepted
Wells
Asked:2022-02-12 05:03:34 +0000 UTC2022-02-12 05:03:34 +0000 UTC

JS 脚本有什么区别（onClick & addEventListener）

  • 772

为了练习，我正在编写一个 Todo 应用程序，但不可能编写一个脚本。在网上找到了现成的解决方案——通过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 方法，但我无法完全理解我的错误在哪里。如果需要添加更多内容，我一定会更新问题。如果对代码有其他的编辑和评论，那么我会很乐意倾听。谢谢！
javascript

1 个回答

  1. Best Answer

    在函数中bindTodoDelete- 立即调用时，有一个递减--todoAmount;。一旦你调用函数，bindTodoDelete变量todoAmount立即减1（虽然从代码来看，这不是必须的）。并且变量本身没有onClick工作todoAmount

    在函数中deleteBtnClick- 有一个事件的初始化click。并且已经在活动click中，对变量的处理正在进行中todoAmount

    addEventListener所以在这种情况下和之间没有区别onclick。只是变量的减量调用在错误的地方。

    • 1

相关问题