Я строил код в javascript, и я изменил его организацию в соответствии с форматом, поскольку я разделял функции как методы на объекты, и каждый метод вызывает другой.Мой предыдущий код работал нормально, но этот почему-то нет.Кратко объясняя мой код: мой код создаст изображения котов, перечисленных в модели, а также боковую панель с именами кошек.После этого он добавит прослушиватели событий к изображениям и элементам боковой панели, когда я нажму на имя, оно покажет изображения кошек.Картинка также кликабельна;Следовательно, при нажатии на него увеличивается количество щелчков внизу изображения.Я надеюсь, что это поможет прочитать код более логично.Надеюсь получить помощь, пожалуйста.Спасибо
/* ================= Model ================= */
//creating an array object that holds all the cats in it
var model = {
cats: [
{
"name": "Poplinre",
"image": "poplinre.jpg",
"clicks": 0
},
{
"name": "Chewie",
"image": "chewie.jpg",
"clicks": 0
},
{
"name": "Snow",
"image": "snow.jpg",
"clicks": 0
},
{
"name": "Cowboy",
"image": "cowboy.jpg",
"clicks": 0
}
]
};
/*=============== Octopus ==================*/
var octopus = {
init: function(){
view.createCats();
view.navBarSide();
},
//function that loads the page and then add eventlistener to each image
addImgListeners: function(){
let idList = document.querySelectorAll("img");
let elemArray = [...idList];
elemArray.forEach( function(elem) {
elem.addEventListener('click', function(e){
octopus.increaseClick(e);
}, false);
});
},
//function that increases the clicks with every click
increaseClick: function(e){
let element = e.target.classList[0];
cats[element].clicks +=1;
view.postClick(element);
},
//function that adds listeners to the side bar
listListeners: function(){
document.getElementById("list").addEventListener('click', function(e){
let targetPic = e.target.innerHTML;
let parentTarget = document.querySelector("."+targetPic+"").parentElement;
view.showPic(parentTarget);
});
}
};
/*============== View ===================*/
var view = {
//view model bulding the view
//function that creates the cats in the dom element
createCats: function(){
let addingCats = "";
(model.cats).forEach(function(cat, catIndex, cats){
addingCats += "<div class='catsP' style='display:none;'><div class='nameC "+cat.name+"'>" + cat.name +"</div><img src='" + cat.image + "' class='"+catIndex.toString()+"'><div id='" + catIndex.toString() + "'>" + cat.clicks.toString() + "</div></div>";
});
var picDiv = document.getElementById("main");
picDiv.innerHTML = addingCats;
octopus.addImgListeners();
},
//function that opens the cat needed and hides it
showPic: function(x){
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
},
// view model bulding the nav bar side
//function that adds cats to the navbar
navBarSide: function(){
let barEl = document.getElementById("list");
(model.cats).forEach( function(cat, catIndex, cats){
barEl.innerHTML += "<li><a>"+ cat.name +"</a></li>";
});
octopus.listListeners();
},
//post the click to the image to show the user
postClick: function(el){
document.getElementById(""+el+"").innerHTML = "Clicks: " + model.cats[el].clicks;
}
};
document.onload = function(){
octopus.init();
};