为什么单击添加按钮时文本值重复 JavaScript

Question

我正在做一个基本的待办事项列表项目，其中必须将来自文本输入的值添加到包含 3 个硬编码列表项的所有属性的无序列表中。

我已经将输入字段中的值添加到列表中，但之后的每个任务都会重复。 我将在下面添加代码。 我对编程很陌生，所以请原谅代码哈哈。 提前致谢。

<body>
    <div class="todo-area">
        <div class="add-area">
            <h1 id="list-name">To-Do List</h1>
            <label for="todo"></label>
            <input type="text" name="todo" id="input-task">
            <button type="submit" id="add-task-button" onclick="add()">Add Task</button>
        </div>
        <div class="list-area">
            <ul id="task-list">
                <li class="li-input"><input type="checkbox" id="check"><span class="task">Email David</span><button class="delete-btn">X</button></li>
                <li class="li-input"><input type="checkbox" id="check"><span class="task">Create ideal persona guide</span><button class="delete-btn">X</button></li>
                <li class="li-input"><input type="checkbox" id="check"><span class="task">Set up A/B test</span><button class="delete-btn">X</button></li>
            </ul>
        </div>
    </div>
    <script src="app.js"></script>
</body>

function add(){
    document.getElementById("add-task-button").addEventListener("click", function (event) {
        let textValue = document.getElementById("input-task").value;
        let tlist = document.getElementById("task-list");
        let newLi = `<li class="li-input"><input type="checkbox" id="check"><span class="task">${textValue}</span><button class="delete-btn">X</button></li>`;
        tlist.insertAdjacentHTML("beforeend", newLi);
        event.preventDefault();
    });
}

Answer 1

每次单击按钮时，您都会向按钮添加一个新事件侦听器，该按钮将添加您的新项目。

一个简单的解决方法是不添加事件侦听器，因为您的按钮元素中的 onClick 已经导致添加 function 在单击时运行。

本质上将 JS 替换为：

function add(){
        let textValue = document.getElementById("input-task").value;
        let tlist = document.getElementById("task-list");
        let newLi = `<li class="li-input"><input type="checkbox" id="check"><span class="task">${textValue}</span><button class="delete-btn">X</button></li>`;
        tlist.insertAdjacentHTML("beforeend", newLi);
        event.preventDefault();
}

为什么单击添加按钮时文本值重复 JavaScript

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-01-30 22:45:32

为什么单击添加按钮时文本值重复 JavaScript

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-01-30 22:45:32

解决方案1
1 已采纳 2022-01-30 22:45:32