我有以下代码，取消按钮不起作用。我无法弄清楚为什么，当点击取消按钮时，它无法正确渲染。预期的行为是当用户点击取消时它只会回滚并隐藏管理窗口。请参阅下面的jsfiddle。 感谢所有帮助
https://jsfiddle.net/launeric/y188v9bg/#&togetherjs=HrxmjAojcq
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2017 by AH0HA (http://jsbin.com/hoqerih/6/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html lang="en">
<head>
<meta name="description" content="udacity_catclicker_ben_admin_mod">
<meta charset="UTF-8">
<title>Cat Clicker</title>
<style id="jsbin-css">
img {
max-width:256px;
max-height:256px;;
width:auto;
height:auto;
}
</style>
</head>
<body>
<ul id="cat-list"></ul>
<div id="cat">
<h2 id="cat-name"></h2>
<div id="cat-count"></div>
<img id="cat-img" src="" alt="cute cat">
<br><button id="cat-admin-button-init" type="button">admin</button></br>
</div>
<div id="CatAdminDiv" style="display:none;">
<br>catName<input type="text" id="adminCatName" value="XXXXXX"></br>
<br>catURL<input type="text" id="adminCatURL" value="zzzzzz"></br>
<br>catCnt<input type="text" id="adminCatCnt" value="999"></br>
<br><button id="cat-admin-button-save" type="button">save</button></br>
<br><button id="cat-admin-button-cancel" type="button">cancel</button></br>
</div>
<script src="js/app.js"></script>
<script id="jsbin-javascript">
/* ======= Model ======= */
var model = {
currentCat: null,
cats: [
{
clickCount : 0,
name : 'Tabby',
imgSrc : 'https://static.pexels.com/photos/33358/cat-fold-view-grey-fur.jpg'
},
{
clickCount : 0,
name : 'Tiger',
imgSrc : 'https://static.pexels.com/photos/54632/cat-animal-eyes-grey-54632.jpeg',
},
{
clickCount : 0,
name : 'Scaredy',
imgSrc : 'http://1.bp.blogspot.com/-zAWnDj_hEeE/UjWq6heqF-I/AAAAAAAAB_8/iThTIziz7VA/s1600/cat.jpg',
},
{
clickCount : 0,
name : 'Shadow',
imgSrc : 'http://ravenclan.yolasite.com/resources/Dawnfleck.jpg',
},
{
clickCount : 0,
name : 'Sleepy',
imgSrc : 'https://i.ytimg.com/vi/aBSzB6qxisQ/0.jpg',
//imgSrc : 'img/9648464288_2516b35537_z.jpg',
//imgAttribution : 'https://www.flickr.com/photos/onesharp/9648464288'
}
]
};
/* ======= Octopus ======= */
var octopus = {
init: function() {
// set our current cat to the first one in the list
model.currentCat = model.cats[0];
// tell our views to initialize
catListView.init();
catView.init();
},
adminInit: function() {
var x = document.getElementById('CatAdminDiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
},
adminCancel: function(){
this.adminInit();
catView.render();
},
adminSave: function() {
var x = document.getElementById('cat-name');
var y = document.getElementById("adminCatName");
x.textContent = y.value;
},
getCurrentCat: function() {
return model.currentCat;
},
getCats: function() {
return model.cats;
},
// set the currently-selected cat to the object passed in
setCurrentCat: function(cat) {
model.currentCat = cat;
},
// increments the counter for the currently-selected cat
incrementCounter: function() {
model.currentCat.clickCount++;
catView.render();
}
};
/* ======= View ======= */
var catView = {
init: function() {
// store pointers to our DOM elements for easy access later
this.catElem = document.getElementById('cat');
this.catNameElem = document.getElementById('cat-name');
this.catImageElem = document.getElementById('cat-img');
this.countElem = document.getElementById('cat-count');
// on click, increment the current cat's counter
this.catImageElem.addEventListener('click', function(){
octopus.incrementCounter();
});
//admin begin
this.catAdminButtonInit = document.getElementById('cat-admin-button-init');
this.catAdminButtonCancel = document.getElementById('cat-admin-button-cancel');
this.catAdminButtonSave = document.getElementById('cat-admin-button-save');
this.AdminCatName = document.getElementById('AdminCatName');
this.AdminCatURL = document.getElementById('AdminCatURL');
this.AdminCatCnt = document.getElementById('AdminCatCnt');
this.AdminCatDiv = document.getElementById('CatAdminDiv');
this.catAdminButtonInit.addEventListener('click', function(){
octopus.adminInit();
});
this.catAdminButtonSave.addEventListener('click', function(){
octopus.adminSave();
});
this.catAdminButtonCancel.addEventListener('click', function(){
octopus.adminCancel();
});
//this.catAdminButtonCancel.addEventListener('click', function(){
// octopus.adminCancel();
//});
//admin end
// render this view (update the DOM elements with the right values)
this.render();
},
render: function() {
// update the DOM elements with values from the current cat
var currentCat = octopus.getCurrentCat();
this.countElem.textContent = currentCat.clickCount;
this.catNameElem.textContent = currentCat.name;
this.catImageElem.src = currentCat.imgSrc;
this.catNameElem.textContent = currentCat.name;
this.admincatName = document.getElementById("adminCatName");
this.admincatName.setAttribute("value", currentCat.name);
//document.getElementById("adminCatURL").setAttribute("value", currentCat.imgSrc);
//document.getElementById("adminCatCnt").setAttribute("value", currentCat.clickCount);
//var x = document.getElementById('AdminCatName');
// x.setAttribute("value",currentCat.name );
//x.value = 'xxx';//currentCat.name;
//var x2 = document.getElementById('adminCatName');
//x2.value=model.currentCat.name;
},
/*
renderAdmin: function(){
var currentCat = octopus.getCurrentCat();
//this.AdminCatName.value = currentCat.name;
var x = document.getElementById('AdminCatName')
x.setAttribute("value",currentCat.name );
}
*/
}
var catListView = {
init: function() {
// store the DOM element for easy access later
this.catListElem = document.getElementById('cat-list');
// render this view (update the DOM elements with the right values)
this.render();
},
render: function() {
var cat, elem, i;
// get the cats we'll be rendering from the octopus
var cats = octopus.getCats();
// empty the cat list
this.catListElem.innerHTML = '';
// loop over the cats
for (i = 0; i < cats.length; i++) {
// this is the cat we're currently looping over
cat = cats[i];
// make a new cat list item and set its text
elem = document.createElement('li');
elem.textContent = cat.name;
// on click, setCurrentCat and render the catView
// (this uses our closure-in-a-loop trick to connect the value
// of the cat variable to the click event function)
elem.addEventListener('click', (function(catCopy) {
return function() {
octopus.setCurrentCat(catCopy);
catView.render();
};
})(cat));
// finally, add the element to the list
this.catListElem.appendChild(elem);
}
}
};
// make it go!
octopus.init();
</script>
</body>
</html>