连接 javascript 和 HTML答案

【问题标题】：Connect javascript and HTML连接 javascript 和 HTML
【发布时间】：2016-02-02 22:05:50
【问题描述】：

我开始学习 JavaScript 和浏览器 API。为什么，如果我按“保存”按钮，弹出窗口不会出现在浏览器中？我哪里错了？

<label for="txtNome"><input id="txtNome" type="text" value=""/><br/></label>
<label for="txtCognome"><input id="txtCognome" type="text" value=""/><br/></label>
<button id="btnSalva"/>Salva</button><br/>

<script>
    var model = { nome: "Mario", cognome: "Rossi" };

    var view = {
        txtNome: document.getElementById("txtNome"),
        txtCognome: document.getElementById("txtCognome"),
        btnSalva: document.getElementById("btnSalva")
    };

    var controller;
        controller = {

        init: function () {
            view.txtNome.value = model.nome;
            view.txtCognome.value = model.cognome;
            view.btnSalva.onclick = controller.salva;
        },

        salva: function () {
            model.nome = view.txtNome.value;
            model.cognome = view.txtCognome.value;
            window.alert("FATTO");
        }
    };
</script>

【问题讨论】：

欢迎来到 ECMAScript 又名 JavaScript 的世界！因为您忘记向按钮添加 事件侦听器。当按钮点击时将执行的函数。
你在使用某种 MVC 框架吗？那里没有“运行”的东西——只有一堆变量。
将view.btnSalva.onclick = controller.salva 改成view.btnSalva.onclick = this.salva 使用this 并且不要忘记调用init 方法.. onclick 左右..

标签： javascript html model-view-controller

【解决方案1】：

你需要调用controller.init()，否则你的代码什么也不做，你只是在声明一些对象。

var model = { nome: "Mario", cognome: "Rossi" };

var view = {
  txtNome: document.getElementById("txtNome"),
  txtCognome: document.getElementById("txtCognome"),
  btnSalva: document.getElementById("btnSalva")
};

var controller;
controller = {

  init: function () {
    view.txtNome.value = model.nome;
    view.txtCognome.value = model.cognome;
    view.btnSalva.onclick = controller.salva;
  },

  salva: function () {
    model.nome = view.txtNome.value;
    model.cognome = view.txtCognome.value;
    window.alert("FATTO");
  }
};

controller.init(); //call init!

<label for="txtNome"><input id="txtNome" type="text" value=""/><br/></label>
<label for="txtCognome"><input id="txtCognome" type="text" value=""/><br/></label>
<button id="btnSalva"/>Salva</button><br/>

【讨论】：

谢谢！很明显，我为自己的要求感到羞耻！
没问题，有时会发生！