eventListener on table not working

Question

I'm making a calculator and I'm stumbling at the first JS hurdle. I'm trying to set up event listeners on the number buttons so that a functions runs on click, but I get the error that I can't set up an event handler on null. But I can't see where I am going wrong!?

I am trying to organise my code as I go along similar to an online course that I did - separating out all the functions and trying to keep it easy to read.

See code and thanks in advance:

//TOTAL CONTROLLER
var totalController = (function () {

})();

//UI CONTROLLER
var UIController = (function () {

    var DOMstrings = {
        calcbuttons: '.calcButtons',
        number: '.number',
        operator: '.operator',
        equals: '.equals',
        total: '#total'
    };

    return {

        getDOMstrings: function () {
            return DOMstrings;
        }
    };

})();


//GLOBAL CONTROLLER
var controller = (function (totalCTRL, UICtrl) {

    var setupEventListeners = function () {
        var DOM = UICtrl.getDOMstrings();

        var el = document.querySelector(".calcButtons");

        el.addEventListener('click', function (e) {
            //var table = e.target;
            //if (table.classList) 

            console.log(e);
            //ctrlAddNumber();

        });

        // click operator
        //click C
        //click AC
        //click equals

    };

    var ctrlAddNumber = function () {
        var selectedNumber;

        //1. get number from html from click
        selectedNumber = document.querySelector(DOM.number).innerHTML;
        console.log(number);
        //2. add to display

    };

    return {
        init: function () {
            console.log('Application has started.');
            setupEventListeners();
        }
    };

})(totalController, UIController);

controller.init();




    
    
    
    
    JavaScript Calculator


    
        
            

            
                
                    AC
                    ←
                    
                    
                
                
                    7
                    8
                    9
                    ÷
                
                
                    4
                    5
                    6
                    ×
                
                
                    1
                    2
                    3
                    -
                
                
                    0
                    .
                    =
                    +

eventListener on table not working

Answers (1)

Related Questions