Javascriptが配列を更新しない

Question

私はjavaScriptで簡単なアプリケーションを書いています。猫のリストがあり、リスト内の任意の要素をクリックすると画像が表示され、その画像をクリックするとcat objのカウントプロパティが増加します。

[管理者]ボタンをクリックした後、catオブジェクトのフィールドを更新しようとすると、ゼロ値に再初期化されています。

HTMLコード

<ul id="list"> 
</ul> 
<div id="cat"> 
    <h2 id="cat-name"></h2> 
    <div id="cat-count"></div> 
    <img id="cat-img" src=""> 
    <button id="admin" class="hide">Admin</button> 
    <form id="form" class="hide"> 
     <input type="text" id="curr-cat-name"/> 
     <input type="text" id="curr-cat-url"/> 
     <input type="text" id="curr-cat-count"/> 
     <button id="cancel">Cancel</button> 
     <button id="save">Save</button> 
    </form> 

</div> 
<script type="text/javascript" src="cat.js"></script> 

Javascriptを

(function(){ 

    var model = { 
     currentCat : null, 
     init: function() { 
      this.cats = [ 
      { 
       "name" : "Cat 1", 
       "src" : "https://s-media-cache-ak0.pinimg.com/736x/f0/26/05/f0260599e1251c67eefca31c02a19a81.jpg", 
       "count" : 0 
      },{ 
       "name" : "Cat 2", 
       "src" : "https://dq25e8j0im0tm.cloudfront.net/images/public/search/Search_Tab_Cat_395x335-3.png", 
       "count" : 0 
      },{ 
       "name" : "Cat 3", 
       "src" : "http://www.pak101.com/funnypictures/Animals/2012/8/2/the_monopoly_cat_vbgkd_Pak101(dot)com.jpg", 
       "count" : 0 

      }, { 

       "name" : "Cat 4", 
       "src" : "https://files.graphiq.com/stories/t2/tiny_cat_12573_8950.jpg", 
       "count" : 0 

      }, { 

       "name" : "Cat 5", 
       "src" : "http://cdn-img.health.com/sites/default/files/styles/400x400/public/styles/400x400/public/styles/main/public/how-take-care-cat-400x400.jpg?itok=ta2kPB58", 
       "count" : 0 

      } 
      ]; 
     }, 

     getAllCats: function() { 
      console.log(this.cats); 
      return this.cats; 
     }, 

     updateCat: function(cat) { 
      model.currentCat.name = cat.name; 
      model.currentCat.count = parseInt(cat.count); 
      model.currentCat.src = cat.src; 
      console.log(model.getAllCats); 
     } 
    } 

    var octopus = { 
     init: function() { 

      model.init(); 
      model.currentCat = model.getAllCats[0]; 
      view.init(); 
     }, 

     getCats: function() { 
      return model.getAllCats(); 

     }, 

     setCurrentCat: function(cat) { 
      console.log(cat); 
      model.currentCat = cat; 
     }, 

     modifyCat : function(obj) { 
      model.updateCat(obj); 
     }, 

     incrementCounter: function() { 
      model.currentCat.count++; 
      view.renderCat(); 
     }, 

     getCurrentCat: function() { 
      return model.currentCat; 
     } 
    } 

    var view = { 
     init: function() { 
      this.list = document.getElementById("list"); 
      this.catImg = document.getElementById("cat-img"); 
      this.catName = document.getElementById("cat-name"); 
      this.catCount = document.getElementById("cat-count"); 
      this.adminBtn = document.getElementById("admin"); 


      this.adminBtn.addEventListener('click', function(){ 
       view.renderForm(); 
      }); 

      this.catImg.addEventListener('click', function(){ 
       octopus.incrementCounter(); 
      }); 

     // render this view (update the DOM elements with the right values) 
     view.renderList(); 
    }, 

    renderList: function() { 
     var catLis = document.getElementById("list"); 
     octopus.getCats().forEach(function(cat){ 
      var elem = document.createElement("li"); 
      elem.textContent = cat.name; 
      elem.addEventListener('click', (function(catCopy){ 
       return function(){ 
        octopus.setCurrentCat(catCopy); 
        view.renderCat(); 
       }; 
      })(cat)); 

      this.list.appendChild(elem); 

     }); 


    }, 

    renderCat: function() { 
     var currentCat = octopus.getCurrentCat(); 
     this.catCount.textContent = currentCat.count; 
     this.catName.textContent = currentCat.name; 
     this.catImg.src = currentCat.src; 
     this.adminBtn.classList.remove("hide"); 
     this.adminBtn.classList.add("show"); 

    }, 

    renderForm: function() { 
     var currentCat = octopus.getCurrentCat(); 
     this.form = document.getElementById("form"); 
     this.form.classList.remove("hide"); 
     this.form.classList.add("show"); 
     this.catFormImg = document.getElementById("curr-cat-url"); 
     this.catFormName = document.getElementById("curr-cat-name"); 
     this.catFormCount = document.getElementById("curr-cat-count"); 
     this.catFormCount.value = currentCat.count; 
     this.catFormName.value = currentCat.name; 
     this.catFormImg.value = currentCat.src; 
     this.cancelBtn = document.getElementById("cancel"); 
     this.saveBtn = document.getElementById("save"); 


     this.saveBtn.addEventListener('click', function(){ 
      console.log(view); 
      octopus.modifyCat({ 
       name: document.getElementById("curr-cat-name").value, 
       count: document.getElementById("curr-cat-count").value, 
       src: document.getElementById("curr-cat-url").value 
      }); 
      /*this.form.classList.remove("show"); 
      this.form.classList.add("hide"); 
      view.adminBtn.classList.remove("show"); 
      view.adminBtn.classList.add("hide");*/ 
     }); 

     this.cancelBtn.addEventListener('click', function(){ 
      this.form.classList.remove("show"); 
      this.form.classList.add("hide"); 
      view.adminBtn.classList.remove("show"); 
      view.adminBtn.classList.add("hide"); 
     }); 



    } 


} 

octopus.init(); 

})(); 

CSS

#result { 
    display: inline-block; 
    padding: 0 10px; 
    font-weight: medium; 
    font-size: 34px; 
} 

img { 
    vertical-align: middle; 
    border-radius: 50%; 
    border: 1px solid black; 
} 

.hide { 
    display: none; 
} 

.show { 
    display: inline-block; 
} 

Answer 1

あなたは、保存ボタンをクリックすると、あなたの<form>ページをリロードするために、ブラウザを引き起こすトリガーされます。ブラウザのタブを見てください。それは非常に速く起こるのでほとんど認識できません。ブラウザの再読み込みを防止するには、少なくとも2つのオプションがあります。

1. フォームを使用しないでください。あなたの入力要素をdivなどに入れてください。
2. 「クリック」で呼び出される関数は、イベントを受け取ります。このeventはクリックです。ページがevent.preventDefault()でリロードされるのを防ぐことができます。

@Icepickleによるコメントをいくつか見てみましょう。