个人中心
gpt4 book ai didi

javascript - 为什么 addEventListener 不调用我的 addItem 函数？

转载 作者：行者123 更新时间：2023-11-30 09:17:22 26 4
gpt4 key购买 nike

前段时间还可以，现在不行了。控制台也没有给出任何错误。我添加了一个 console.log 字符串

console.log("You can't reach me!!");

跟踪执行流程，但是当放置在 addItem 函数中并单击 + 按钮 时字符串停止显示，这让我怀疑 addItem 函数未被调用。

事件监听器:

document.querySelector(".button").addEventListener('click', addItem);

addItem 函数:

let controller = (function(budgetCtrl, uiCtrl){

let input,newItem;

let addItem = function(){
    // 1. Get the field input data
    console.log("You can't reach me!!");
    input = uiCtrl.getInput();
    if(input.description !="" && !isNaN(input.value) && input.value > 0){

        // 2. Add the item to the budget budgetController
        newItem = budgetCtrl.addItem(input.type, input.description, input.value);
        // 3. Add the item to the UI
        uiCtrl.addListItem(newItem, input.type);

        // 4. Clear the fieldsArray
        uiCtrl.clearFields();
        // 5.Calculate and update the budget
        updateBudget();
    }


}

我在下面添加了整个代码以备不时之需。

html文件

<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Budget App</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="top">
            <div class="total">money</div>
            <div class="green">
                <span class="left">INCOME $ </span><span class="right, income-budget">+ 4,300.00</span>
            </div>
            <div class="red">
                <span class="left">EXPENSES $ </span><span class="right, expense-budget">- 1954.46</span>
            </div>
        </div>
        <div class="middle">
            <select class="operation">
                <option value="exp">-</option>
                <option selected value="inc">+</option>
            </select>
            <input class="description" type="text"  placeholder="Add description">
            <input class="value" type="number"  placeholder="value" min ="0">
            <button class="button">+</button>
        </div>
        <div class="bottom">
            <div class="bottom-left">
                <h3>INCOME</h3>
                <div class="income-list">
                    <!--
                    <div id="income-0" class="inline">
                        <div class="item-description">Salary</div>
                        <div class="item-value">+2,100.00</div>
                        <button type="button">X</button>
                    </div>
                    <!-->

                </div>
            </div>
            <div class="bottom-right">
                <h3>EXPENSES</h3>
                <div class="expense-list">
                <!--
                    <div id="expense-0" class="inline">
                        <div class="item-description">Bought car</div>
                        <div class="item-value">-2,100.00</div>
                        <button type="button">X</button>
                    </div>
                <!-->

                </div>
            </div>
        </div>
        <script src="app.js" charset="utf-8"></script>
    </body>
</html>

如果您需要整个 javascript 文件

let budgetController = (function(){
    let Expense = function(id, description, value){
        this.id = id;
        this.description = description;
        this.value = value;
    };
    let Income = function(id, description, value){
        this.id = id;
        this.description = description;
        this.value = value;
    };

    let calculateTotal = function(type){
        let sum = 0;
        data.allItems[type].forEach(function(current){
            sum += current.value;
        });
        data.totals[type] = sum;
    };

    let data = {
        allItems: {
            exp:[],
            inc:[]
        },
        totals: {
            exp: 0,
            inc:0
        },
        budget: 0
    }
    // Public method that allows other modules to add a new item to the data struc
    return{
        addItem: function(type, description, value){
            let newItem, ID;

            // Create a new ID
            if (data.allItems[type].length > 0){
                // I don't understand the .id in the following line of code
                ID = data.allItems[type][data.allItems[type].length - 1].id + 1;
            } else{
                ID = 0;
            }

            // Create new item based on 'inc' or 'exp'
            if(type === 'exp'){
                newItem = new Expense(ID, description, value);
            }
            else if( type === 'inc'){
                newItem = new Income(ID, description, value);
            }

            // Add item to the data structure
            data.allItems[type].push(newItem);
            // Return the new element
            return newItem;
        },

        calculateBudget: function(){
                // calculate total income and expenses
                calculateTotal('exp');
                calculateTotal('inc');
                // Calculate the budget: income - EXPENSES
                data.budget = data.totals.inc - data.totals.exp;
        },

        getBudget: function(){
            return{
                budget: data.budget,
                totalInc: data.totals.inc,
                totalExp: data.totals.exp
            }
        },

        testing: function(){
            console.log(data);
        }
    };
})();

let uiController = (function(){

    return{
        getInput: function(){
            return{
                type: document.querySelector('.operation').value,
                description: document.querySelector('.description').value,
                value: parseFloat(document.querySelector('.value').value)
            };
        },
        addListItem: function(obj, type){
            let HTML, listType;
            // Create htML string with placeholder text

            if(type === 'inc'){
                element = '.income-list';
                listType = 'income';
            }else{
                element = '.expense-list';
                listType = 'expense';
            }
            HTML = '<div id="%listType%-%id%" class="inline">' +
                        '<div class="item-description">%description%</div>' +
                        '<div class="item-value">%value%</div>' +
                        '<button type="button">X</button>' +
                    '</div>'
            // Replace the placeholder text with the actual data
            HTML = HTML.replace('%listType%', listType)
            HTML = HTML.replace('%id%', obj.id);
            HTML = HTML.replace('%description%', obj.description);
            HTML = HTML.replace('%value%', obj.value);

            // Insert the htML into the DOM
            document.querySelector(element).insertAdjacentHTML('beforeend', HTML);
        },
        clearFields: function(){
            let fields, fieldsArray;
            // querySelectorAll returns a list not an array
            fields = document.querySelectorAll('.description, .value');
            fieldsArray = Array.prototype.slice.call(fields);

            fieldsArray.forEach(function(current, index, array){
                current.value ="";
            });
            // Sets focus to the descriptions field
            fieldsArray[0].focus();
        },

        displayBudget: function(object){
            document.querySelector('.total').innerHTML = object.budget;
            document.querySelector('.income-budget').innerHTML = object.totalInc;
            document.querySelector('.expense-budget').innerHTML = object.totalExp;
        }
    }

})();

let controller = (function(budgetCtrl, uiCtrl){

    let input,newItem;

    let addItem = function(){
        // 1. Get the field input data
        console.log("You can't reach me!!");
        input = uiCtrl.getInput();
        if(input.description !="" && !isNaN(input.value) && input.value > 0){

            // 2. Add the item to the budget budgetController
            newItem = budgetCtrl.addItem(input.type, input.description, input.value);
            // 3. Add the item to the UI
            uiCtrl.addListItem(newItem, input.type);

            // 4. Clear the fieldsArray
            uiCtrl.clearFields();
            // 5.Calculate and update the budget
            updateBudget();
        }


    }

    let updateBudget = function(){
        // 1. Calculate the budgetCtrl
        budgetCtrl.calculateBudget();
        // 2. Return the budget
        let budget = budgetCtrl.getBudget();
        // 3. Display the budget on the UI
        uiCtrl.displayBudget(budget);
    }

    //let ctrlDeleteItem = function(event){
    //        console.log(event.target);
    //}

    let enterKey = function(event){
        if(event.keyCode === 13 || event.which === 13){// older browers use which
        addItem();
        }
    }

    return {
        init: function(){
            const budget =  {budget: 0, totalInc:0, totalExp:0};
            uiCtrl.displayBudget(budget);
        }
    };

    document.querySelector(".button").addEventListener('click', addItem);
    document.addEventListener('keypress', enterKey);
    document.querySelector('.bottom').addEventListener('click', ctrlDeleteItem);


})(budgetController, uiController);

controller.init();

最佳答案

您的代码永远不会到达 addEventListener，因为您之前有一个 return。这是几乎无法访问的代码。

return {
    init: function(){
        const budget =  {budget: 0, totalInc:0, totalExp:0};
        uiCtrl.displayBudget(budget);
    }
};
//unreachable..
document.querySelector(".button").addEventListener('click', addItem);
document.addEventListener('keypress', enterKey);
document.querySelector('.bottom').addEventListener('click', ctrlDeleteItem);

解决方案

使用 return 切换无法访问的代码。

document.querySelector(".button").addEventListener('click', addItem);
document.addEventListener('keypress', enterKey);
document.querySelector('.bottom').addEventListener('click', ctrlDeleteItem);

return {
    init: function(){
        const budget =  {budget: 0, totalInc:0, totalExp:0};
        uiCtrl.displayBudget(budget);
    }
};

关于javascript - 为什么 addEventListener 不调用我的 addItem 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54117459/

26 4 0
文章推荐： python - 使用keras进行预测时出现错误
文章推荐： java - 迭代 HashMap 时更新对象属性
文章推荐： python - 是否有可能在 Keras 中实现一个最大池化层，它提供给定池大小的最大 n 值？
文章推荐： java - 操作数堆栈欠载
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com