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>`;

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

1 个答案: