對於簡單的應用程序的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不起作用

回答

相關問題