JavaScript 不更新数组

Question

我正在用 javaScript 编写一个简单的应用程序。有一个猫列表，当我单击列表中的任何元素时，它会显示一个图像，当我单击该图像时，它会增加猫对象的计数属性。

单击管理按钮后，当我尝试更新 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>被触发，导致浏览器重新加载页面。查看您的浏览器选项卡。它很难被认出，因为它发生得太快了。为了防止浏览器重新加载，您至少有两个选择。

1. 不要使用表单。只需将您的输入元素放在 div 或其他内容中即可。
2. “点击”时调用的函数会接收一个事件。这个event是点击。您可以使用 event.preventDefault() 阻止页面重新加载.

请参阅@Icepickle 的评论以了解更多可能性。