对于简单的应用程序的Javascript MVC不起作用

-1

回想我以前的问题（关于简单的袖珍计算器），我尝试使用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中的警报框不会弹出。我不明白为什么。你可以帮帮我吗？

来源

2014-09-21 Ee Bb

对不起：行 “和我的两个JS filController.js不弹出，这意味着CES是：” 应读“和我的两个js文件是” – 2014-09-21 14:40:42

的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;

来源

2014-09-21 14:44:38

对于简单的应用程序的Javascript MVC不起作用

回答

相关问题