CODEWITHSUNDEEP
javascripthtmlmodel-view-controller
Simon
Simon

Reputation: 95

Connect javascript and HTML

I'm beginning to learn JavaScript , and browser API. Why, if I press the "save" button , the pop up window does not appears in the browser ? Where am I wrong?

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

Upvotes: 1

Views: 76

Answers (1)

Marcos Casagrande
Marcos Casagrande

Reputation: 40404

You need to call controller.init(), otherwise your code does nothing, you were just declaring some objects.

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/>

Upvotes: 2

Related Questions