為什么單擊添加按鈕時文本值重復 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