导致此错误的增量：未捕获的ReferenceError：前缀操作中的左侧表达式无效

Question

我正在学习javascript，现在我被困在一个小项目上。我收到一个错误：

“未捕获的ReferenceError：HTMLImageElement中前缀操作中的左侧表达式无效。（app.js：142）”

我不知道错误在哪里。我会发布下面的代码，也许有人会给我一个答案。提前致谢。

$(function () {

const model = {



    cats: [
        {
            name: 'Suzie',
            src: 'src="img/Suzi.jpg"',
            counter: 0
        },
        {
            name: 'Cici',
            src: 'src="img/Cici.jpg"',
            counter: 0
        },
        {
            name: 'Pufosenie',
            src: 'src="img/Pufosenie.jpg"',
            counter: 0
        },
        {
            name: 'Ariciul',
            src: 'src="img/Ariciul.jpg"',
            counter: 0
        },
        {
            name: 'Iri',
            src: 'src="img/Iri.jpg"',
            counter: 0
        }

    ]


};

const octupus = {

    getCatsArrayLength: function () {
        return model.cats.length;


    },

    getCatsName: function(number){
        return model.cats[number].name;


    },

    getCatsSrc: function(number){

        return model.cats[number].src;
    },

    getCatsCounter: function(number){
        return model.cats[number].counter;

    },

    generateListOfCats: function (arrayOfCats) {

            viewList.renderList();



    },

    generateCatPicture: function () {

        viewCatPicture.renderPicture();


    },

};




const viewList = {


    renderList: function () {
        const ul = document.querySelector('.cat-list');
        for (let i = 0; i < octupus.getCatsArrayLength(); i++) {
            const catLi = `<li class="catName"><h3 class="h3Cat">${octupus.getCatsName(i)}</h3></li>`;
            ul.insertAdjacentHTML('beforeend', catLi);


        }


    }



};

const viewCatPicture = {

    renderPicture: function () {
        for (let i = 0; i < octupus.getCatsArrayLength(); i++) {
            const h3CatName = document.querySelectorAll('.catName .h3Cat');
            h3CatName[i].addEventListener('click', function (e) {
                const displayArea = document.querySelector('.display-area');
                const imageToBeInserted =
                    `<div class="Cat">
                <h3 class="h3Cat">${octupus.getCatsName(i)}</h3>
                <img class="catImg" alt="image of a kitten" ${octupus.getCatsSrc(i)}">

                <ul class="click-list">
                    <li id="counter"><h3 class="h3Cat">${octupus.getCatsCounter(i)}</h3></li>
                    <li><h3 class="h3Cat">clicks</h3></li>

                </ul>
            </div>`;

                displayArea.innerHTML = imageToBeInserted;
                const imgSelected = document.querySelector('.catImg');
                imgSelected.addEventListener('click', function () {
                    const counterSelect = document.getElementById('counter');
                    counterSelect.innerHTML = `<h3 class="h3Cat">${++octupus.getCatsCounter(i)}</h3>`;




                });



            });


        }

    },

    startCatPicture: function () {
        this.renderPicture();

    }

};
octupus.generateListOfCats(model.cats);
octupus.generateCatPicture();



}());

Answer 1

错误在这里：

 counterSelect.innerHTML = `<h3 class="h3Cat">${++octupus.getCatsCounter(i)}</h3>`;

您只能对变量或对象属性使用递增和递减运算符;可以在赋值操作的左侧的东西。出于同样的原因

 someFunction(1, 2) = 5;

没有意义，++octupus.getCatsCounter(i)也没有。如果你想要该函数调用的值加1，它将是

 counterSelect.innerHTML = `<h3 class="h3Cat">${1 + octupus.getCatsCounter(i)}</h3>`;