Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

Question

I'm so motivated guy who wants to be Javascript Developer. Debugs are killing me. I think this part is the hardest part ever of our begining. Anyway; I'm in one project. Kinda last part of it. I have this error, which I could not find solution.

My Javascript codes are here:

var arayuz = (function(){
    
    var Domstrings = {
        InputType:'.add__type',
        InputDescription:'.add__description',
        InputValue:'.add__value',
        InputBtn:'.add__btn',
        IncomeList:'income__list',
        ExpenseList:'expenses__list'
            
    };

    return {
        getInput: function() {
            return {
                type: document.querySelector(Domstrings.InputType).value, // Will be either inc or exp
                description: document.querySelector(Domstrings.InputDescription).value,
                value: document.querySelector(Domstrings.InputValue).value
            };
        },

        // and the part where I got stuck...

        addListItem: function(obj,type){
            //Default HTML
            var html, newHtml, element;
            if(type == 'inc'){
                element = Domstrings.IncomeList;
                html='<div class="item clearfix" id="income-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">+%value%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>'
            } else if(type == 'exp'){
                element = Domstrings.ExpenseList;
                html='<div class="item clearfix" id="expense-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">- %value%</div><div class="item__percentage">21%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
            }
            // Change HTML
            newHtml = html.replace('%id%', obj.id);
            newHtml = newHtml.replace('%description%', obj.description);
            newHtml = newHtml.replace('%value%', obj.value);
        
            // YAZILARIN ÖNCESİNE EKLENMESİNİ EKLEYEN HTMLADJACENT METODU KULLANIMI
        
            document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);        
        
        },

        getDomstrings:function(){
            return Domstrings;
        }
       
    } ;       
        
})();

Answer 1

Your error literally means that you've tried to access a property named insertAdjacentHTML on something that was null (as null and undefined can't have properties).

There's only a single line where this can occur:

document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);

The problem is, that you've forgotten to write a dot (or a # if they're IDs) before your IncomeList and ExpenseList selectors.

Without it, the code will try to look up an element with tag name of income__list and expenses__list.

This will result in returning null from .querySelector (as there's no such element), and you get an error, when you try to call insertAdjacentHTML on it.