Incrementation that gives this error: Uncaught ReferenceError: Invalid left-hand side expression in prefix operation

Question

I'm learning javascript and I got stuck on a little project right now. I receive an error:

"Uncaught ReferenceError: Invalid left-hand side expression in prefix operation at HTMLImageElement. (app.js:142)"

and I don't know where the mistake is. I'll post the code bellow, maybe someone will have an answer for me. Thanks in advance.

$(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

The error is here:

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

You can only use the increment and decrement operators on variables or object properties; things that can be on the left-hand side of an assignment operation. For the same reason that

 someFunction(1, 2) = 5;

does not make sense, ++octupus.getCatsCounter(i) does not either. If you want the value of that function call plus 1, it would be

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