從函式回傳的元素不適用于事件偵聽器-有解無憂

有一個任務我一直在努力解決。在我的代碼中，我有一個“待辦事項串列”。在那里，我想讓按鈕（“ doneButton ”、“ deleteButton ”）與“ addEventListener ”一起使用。

不知何故，按鈕不能按預期作業。當我在代碼中運行console.log(todoItem.doneButton)它時，它顯示了正確的按鈕。但就在下面這一行，我嘗試將“ addEventListener ”添加到同一個元素中，它根本不起作用。

(function() {
    function createAppTitle(title) {
        let appTitle = document.createElement('h2');
        appTitle.textContent = title;
        appTitle.classList.add('mt-5', 'mb-3');
        return appTitle;
    }

    function createToDoList() {
        let list = document.createElement('ul')
        return list;
    }

    function createToDoForm() {
        let buttonWrapper = document.createElement('div')
        let form = document.createElement('form')
        let input = document.createElement('input')
        let button = document.createElement('button')

        form.classList.add('input-group', 'mb-3');
        input.classList.add('form-control');
        input.placeholder = 'Enter the name of the task';
        buttonWrapper.classList.add('input-group-append');
        button.classList.add('btn', 'btn-primary');
        button.textContent = 'Add a task';

        buttonWrapper.append(button);
        form.append(input);
        form.append(buttonWrapper);

        return {
            form,
            input,
            button
        };
    }

    function createToDoItem (name) {
        let item = document.createElement('li')
        let buttonGroup = document.createElement('div')
        let doneButton = document.createElement('button')
        let deleteButton = document.createElement('button')

        item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
        item.textContent = name;

        buttonGroup.classList.add('btn-group','btn-group-sm');
        doneButton.classList.add('btn','btn-success');
        doneButton.textContent = "Done";
        deleteButton.classList.add('btn','btn-danger');
        deleteButton.textContent = 'Delete';

        buttonGroup.append(doneButton);
        buttonGroup.append(deleteButton);
        item.append(buttonGroup);

        return {
            item,
            doneButton,
            deleteButton
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
            let container = document.querySelector('.container');
            let appTitle = createAppTitle('Name of the Target');
            let list = createToDoList();
            let form = createToDoForm();
            let todoItems = [createToDoItem('Book your trip'), createToDoItem('Fly to Dubai'), createToDoItem('Book'  
                ' your trip')];
            container.append(appTitle);
            container.append(form.form);
            container.append(list);
            list.append(todoItems[0].item)
            list.append(todoItems[1].item)
            list.append(todoItems[2].item)

        form.form.addEventListener('submit', (e)=> {
            e.preventDefault();
            if (!form.input.value) {
                return;
            }

            let todoItem = createToDoItem(form.input.value);
            console.log(todoItem.doneButton)
            todoItem.doneButton.addEventListener('click', function () {
                console.log('done button clicked');
            });
            todoItem.deleteButton.addEventListener('click', ()=> {
                console.log('delete button clicked');
            })

            list.append(createToDoItem(form.input.value).item)
            form.input.value = '';
            });
        })
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDo</title>
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
    <script src="index.js" defer></script>
</head>
<body>
<div id="toDo" class="container"></div>
</body>
</html>

uj5u.com熱心網友回復：

您應該將事件附加到 createToDoItem()

(function() {
    function createAppTitle(title) {
        let appTitle = document.createElement('h2');
        appTitle.textContent = title;
        appTitle.classList.add('mt-5', 'mb-3');
        return appTitle;
    }

    function createToDoList() {
        let list = document.createElement('ul')
        return list;
    }

    function createToDoForm() {
        let buttonWrapper = document.createElement('div')
        let form = document.createElement('form')
        let input = document.createElement('input')
        let button = document.createElement('button')

        form.classList.add('input-group', 'mb-3');
        input.classList.add('form-control');
        input.placeholder = 'Enter the name of the task';
        buttonWrapper.classList.add('input-group-append');
        button.classList.add('btn', 'btn-primary');
        button.textContent = 'Add a task';

        buttonWrapper.append(button);
        form.append(input);
        form.append(buttonWrapper);

        return {
            form,
            input,
            button
        };
    }

    function createToDoItem (name) {
        let item = document.createElement('li')
        let buttonGroup = document.createElement('div')
        let doneButton = document.createElement('button')
        let deleteButton = document.createElement('button')

        item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
        item.textContent = name;

        buttonGroup.classList.add('btn-group','btn-group-sm');
        doneButton.classList.add('btn','btn-success');
        doneButton.textContent = "Done";
        deleteButton.classList.add('btn','btn-danger');
        deleteButton.textContent = 'Delete';

        buttonGroup.append(doneButton);
        buttonGroup.append(deleteButton);
        item.append(buttonGroup);

        doneButton.addEventListener('click', function () {
            console.log('done button clicked');
        });
        deleteButton.addEventListener('click', ()=> {
            console.log('delete button clicked');
        })

        

        return {
            item,
            doneButton,
            deleteButton
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
            let container = document.querySelector('.container');
            let appTitle = createAppTitle('Name of the Target');
            let list = createToDoList();
            let form = createToDoForm();
            let todoItems = [createToDoItem('Book your trip'), createToDoItem('Fly to Dubai'), createToDoItem('Book'  
                ' your trip')];
            container.append(appTitle);
            container.append(form.form);
            container.append(list);
            list.append(todoItems[0].item)
            list.append(todoItems[1].item)
            list.append(todoItems[2].item)

        form.form.addEventListener('submit', (e)=> {
            e.preventDefault();
            if (!form.input.value) {
                return;
            }

            let todoItem = createToDoItem(form.input.value);
            console.log(todoItem.doneButton)
            list.append(createToDoItem(form.input.value).item)
              form.input.value = '';
            });
        })
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDo</title>
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
    <script src="index.js" defer></script>
</head>
<body>
<div id="toDo" class="container"></div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359717.html

標籤：javascript dom 添加事件监听器去做

上一篇：我想讓它用一個功能多次作業

下一篇：陣列長度為零但具有可訪問元素