Javascript 单击事件按钮的输入文本框未正确更新
我有以下代码，取消按钮不起作用。我不明白为什么当按下“取消”按钮时，它不能正确渲染。预期的行为是当用户点击cancel时，它将回滚并隐藏admin窗口。请参阅下面的jsfiddle。 谢谢你的帮助Javascript 单击事件按钮的输入文本框未正确更新,javascript,jquery,Javascript,Jquery,我有以下代码，取消按钮不起作用。我不明白为什么当按下“取消”按钮时，它不能正确渲染。预期的行为是当用户点击cancel时，它将回滚并隐藏admin窗口。请参阅下面的jsfiddle。 谢谢你的帮助 猫点击器 img{ 最大宽度：256px； 最大高度：256px；； 宽度：自动； 高度：自动； } 管理员 catName catURL catCnt 拯救 取消 /*=======型号========*/ var模型={ currentCat:null， 猫：[ { 点击次数：0， 名称：“
猫点击器
img{
最大宽度：256px；
最大高度：256px；；
宽度：自动；
高度：自动；
}
管理员
catName
catURL
catCnt
拯救
取消
/*=======型号========*/
var模型={
currentCat:null，
猫：[
{
点击次数：0，
名称：“Tabby”，
imgSrc:'https://static.pexels.com/photos/33358/cat-fold-view-grey-fur.jpg'
},
{
点击次数：0，
名字：“老虎”，
imgSrc:'https://static.pexels.com/photos/54632/cat-animal-eyes-grey-54632.jpeg',
},
{
点击次数：0，
名字：'Scaredy'，
imgSrc:'http://1.bp.blogspot.com/-zAWnDj_hEeE/UjWq6heqF-I/AAAAAAAAB_8/iThTIziz7VA/s1600/cat.jpg',
},
{
点击次数：0，
名称：'影子'，
imgSrc:'http://ravenclan.yolasite.com/resources/Dawnfleck.jpg',
},
{
点击次数：0，
名字：'困倦'，
imgSrc:'https://i.ytimg.com/vi/aBSzB6qxisQ/0.jpg',
//imgSrc:“img/9648464288_2516B3537_z.jpg”，
//信息分配：'https://www.flickr.com/photos/onesharp/9648464288'
}
]
};
/*==========章鱼==============*/
八达通={
init:function（）{
//将我们当前的cat设置为列表中的第一个
model.currentCat=model.cats[0]；
//告诉我们的视图初始化
catListView.init（）；
init（）；
},
adminInit:function（）{
var x=document.getElementById（'CatAdminDiv'）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
},
adminCancel:函数（）{
this.adminint（）；
catView.render（）；
},
adminSave:函数（）{
var x=document.getElementById（'cat-name'）；
var y=document.getElementById（“adminCatName”）；
x、 textContent=y.value；
},
getCurrentCat:函数（）{
返回模型.currentCat；
},
getCats:function（）{
returnmodel.cats；
},
//将当前选定的cat设置为传入的对象
setCurrentCat：功能（cat）{
model.currentCat=cat；
},
//增加当前选定cat的计数器
递增计数器：函数（）{
model.currentCat.clickCount++；
catView.render（）；
}
};
/*=======查看========*/
var catView={
init:function（）{
//存储指向DOM元素的指针，以便于以后访问
this.catElem=document.getElementById（'cat'）；
this.catnamelem=document.getElementById（'cat-name'）；
this.catimagelem=document.getElementById（'cat-img'）；
this.countElem=document.getElementById（'cat-count'）；
//单击后，增加当前cat计数器
this.catimagelem.addEventListener（'click'，function（））{
octopus.incrementCounter（）；
});
//管理开始
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.adminctaname=document.getElementById（'adminctaname'）；
this.AdminCatURL=document.getElementById（'AdminCatURL'）；
this.adminctcnt=document.getElementById（'adminctcnt'）；
this.AdminCatDiv=document.getElementById（'CatAdminDiv'）；
this.catAdminButtonInit.addEventListener（'click'，function（）{
octopus.adminint（）；
});
this.catAdminButtonSave.addEventListener（'click'，function（））{
octopus.adminSave（）；
});
this.catAdminButtonCancel.addEventListener（'click'，function（）{
octopus.adminCancel（）；
});
//this.catAdminButtonCancel.addEventListener（'click'，function（）{
//octopus.adminCancel（）；
//});
//管理端
//呈现此视图（使用正确的值更新DOM元素）
这个。render（）；
},
render:function（）{
//使用当前cat中的值更新DOM元素
var currentCat=octopus.getCurrentCat（）；
this.countElem.textContent=currentCat.clickCount；
this.catnamelem.textContent=currentCat.name；
this.catimagelem.src=currentCat.imgSrc；
this.catnamelem.textContent=currentCat.name；
this.adminctaname=document.getElementById（“adminctaname”）；
this.admincatName.setAttribute（“值”，currentCat.name）；
//document.getElementById（“adminCatURL”）.setAttribute（“value”，currentCat.imgSrc）；
//document.getElementById（“adminCatCnt”）.setAttribute（“value”，currentCat.clickCount）；
//var x=document.getElementById（'AdminCatName'）；
//x.setAttribute（“值”，currentCat.name）；
//x、 值='xxx'；//currentCat.name；
//var x2=document.getElementById（'adminCatName'）；
//x2.值=model.currentCat.name；
},
/*
renderAdmin:函数（）{
var currentCat=octopus.getCurrentCat（）；
//this.AdminCatName.value=currentCat.name；
var x=document.getElementById（'AdminCatName'）
x、 setAttribute（“值”，currentCat.name）；
}
*/
}
var catListView={
init:function（）{
//存储DOM元素以便于以后访问
this.catListElem=document.getElementById（'cat-list'）；
<!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>