对于简单的应用程序的Javascript MVC不起作用
问题描述:
回想我以前的问题(关于简单的袖珍计算器),我尝试使用MVC pattermn重写它。我理解MVC的基础知识,但对于初学者来说,实现它非常困难。所以我的HTML代码:对于简单的应用程序的Javascript MVC不起作用
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/SimpleCalculator.css">
<script type="text/javascript" src = "js/SC_Controller.js"></script>
<script type="text/javascript" src = "js/SC_Model.js"></script>
<script type="text/javascript">
new SC_Controller().init();
</script>
</head>
<body>
<h2>Simple Calculator</h2>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="displayId"></div>
<div class="keys">
<p><input type="button" class="button black" value="7">
<input type="button" class="button black" value="8">
<input type="button" class="button black" value="9">
<input type="button" class="button orange" value="/">
</p>
<p><input type="button" class="button black" value="4">
<input type="button" class="button black" value="5">
<input type="button" class="button black" value="6">
<input type="button" class="button orange" value="*">
</p>
<p><input type="button" class="button black" value="1">
<input type="button" class="button black" value="2">
<input type="button" class="button black" value="3">
<input type="button" class="button orange" value="-">
</p>
<p><input type="button" class="button black0" value="0">
<input type="button" class="button black" value=".">
<input type="button" class="button orange" value="+"></p>
<p><input type="button" class="button greenc" value="C">
<input type="button" class="button yelloweq" value="="></p>
</div>
</div>
</body>
和我的两个JS filController.js是:
SC_Controller.js
var SC_Controller = function(scModel){
var model = scModel || new SC_Model();
var s = "";
function clicked(){
s += model.getValue();
alert(s);
model.setValue(s);
}
function init(){
document.getElementsByClassName("button").onclick = clicked;
}
return {
init : init;
model : model
};
};
和
SC_Model.js
var SC_Model = function(){
function getValue(){
return(document.getElementsByClassName('button').value);
}
function setValue(val){
document.getElementById('displayId').value = val;
}
return{
getValue : getValue,
setvalue : setValue
};
};
为了实现MVC模式,我使用了Google搜索并找到了一个示例。我尝试将它适用于我的计算器代码,但启动HTML时,当我单击某个键时,SC_Controller.js中的警报框不会弹出。我不明白为什么。你可以帮帮我吗 ?
答
的document.getElementsByClassName("button")
返回节点
的集合(见https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName)。
您需要在应用点击处理程序以及请求.value
时迭代它们。
例如,
document.getElementsByClassName("button").onclick = clicked;
应该
var buttons = document.getElementsByClassName("button");
for(var i=0;i<buttons.length;i++)
buttons[i].onclick = clicked;
对不起:行 “和我的两个JS filController.js不弹出,这意味着CES是:” 应读“和我的两个js文件是” – 2014-09-21 14:40:42