Connect javascript and HTML

Question

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>

Welcome to world of ECMAScript aka JavaScript ! Because you forgot to add an event listener to the button. A function that will execute when button clicks. — user2705585
– user2705585, Commented Feb 2, 2016 at 22:07
are you using some kind of MVC framework? There's nothing there that "runs" - just a bunch of variables. — Sam Axe
– Sam Axe, Commented Feb 2, 2016 at 22:09
change view.btnSalva.onclick = controller.salva into view.btnSalva.onclick = this.salva use this and do not forget to call the init method as well.. onclick or so.. — animaacija
– animaacija, Commented Feb 2, 2016 at 22:10

Marcos Casagrande · Accepted Answer · 2016-02-02 22:09:58Z

2

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

answered Feb 2, 2016 at 22:09

Marcos Casagrande

40.7k11 gold badges93 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simon Over a year ago

Thank you! It was so obvious that I'm ashamed of having asked for it!!

Marcos Casagrande Over a year ago

No problem, sometimes it happens!

Collectives™ on Stack Overflow

Connect javascript and HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related