Я изучаю javascript, и я застрял в маленьком проекте прямо сейчас. Я получаю сообщение об ошибке:
"Uncaught 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();
}());