My code is not working after I have organized it differently

I was building a code in javascript, and I have changed the organization of it following the format as I separated the functions as methods into objects and each method calls the other. My previous code was working fine, but this one for some reason is not. Briefly explaining my code: My code will create pictures of the cats listed in the model, also it creates a sidebar that holds the names of the cats. Afterwards, it will add event listeners to the pictures and the sidebar elements when I click on the name it'll show the cat pictures. The picture is also clickable; Therefore, when it is clicked it'll increment the number of clicks on the bottom of the picture. I hope this would help reading the code make more sense. Hope to get some help, please. Thank you

    /* ================= 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(){



    //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){
        }, false);

    //function that increases the clicks with every click
    increaseClick: function(e){
        let element =[0];
        cats[element].clicks +=1;

    //function that adds listeners to the side bar

    listListeners: function(){
        document.getElementById("list").addEventListener('click', function(e){
            let targetPic =;
            let parentTarget = document.querySelector("."+targetPic+"").parentElement;



/*============== 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 ""'>" + +"</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;


    //function that opens the cat needed and hides it

    showPic: function(x){
        if ( === "none") {
   = "block";
        } else {
   = "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>"+ +"</a></li>";


    //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(){

1 answer

  • answered 2018-10-11 22:21 Sven Liivak

    Use window.onload instead of document.onload. Latter fires when DOM is ready, which may happen before images/scripts are loaded. window.onload waits for a full document being loaded.

    There's other small(er) mistakes, as mentioned in comments.