Question

我很想成为Javascript开发人员。调试杀死了我。我认为这是我们开始以来最困难的部分。无论如何; 我在一个项目中。金达的最后一部分。我遇到此错误，找不到解决方法。

我的Javascript代码在这里：

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

从字面上看，您的错误意味着您试图访问insertAdjacentHTML上某个东西的名为null的属性（因为null和undefined不能具有属性）

只有一行可以发生这种情况：

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

问题是，您忘记在IncomeList和ExpenseList选择器之前写点（如果是ID，则为＃）。

没有它，代码将尝试查找具有标记名为income__list和expenses__list的元素。

这将导致从null返回.querySelector（因为没有这样的元素），并且当您尝试在其上调用insertAdjacentHTML时会收到错误消息。

未捕获的TypeError：无法读取null的属性'insertAdjacentHTML'

1 个答案: