简单应用程序的 Javascript MVC 不起作用答案

【问题标题】：Javascript MVC for a simple app does not work简单应用程序的 Javascript MVC 不起作用
【发布时间】：2014-09-21 14:38:47
【问题描述】：

参考我之前的问题（关于简单的袖珍计算器），我尝试使用 MVC 模式重写它。我了解 MVC 的基础知识，但是对于初学者来说实现它是相当困难的。所以我的html代码是：

  <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 模式，我搜索并找到了一个示例。我试图将其调整为我的计算器代码，但启动 HTML，当我单击一个键时，SC_Controller.js 中的警报框不会弹出。我不明白为什么。你可以帮帮我吗？

【问题讨论】：

对不起："and my two js filController.js"这一行没有弹出，意思是ces are :" 应该读"and my two js files are"

标签： javascript model-view-controller

【解决方案1】：

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;

【讨论】：