title: Javascript + jQuery + function that implements getters and setters
body: <p>I am starting to learn JavaScript and jQuery, and there is a small JavaScript concept that I do not understand at all. It is about functions, setters and getters. Here is the code example. </p>
  
  <p>As you can see, when I click on a markup, a dialog form opens, I get data through the dialog-form, save it into two objects (<code>myHeader</code> and <code>myContent</code>), and finally use it. </p>
  
  <ul>
  <li>The first <code>console.log</code> executed is <code>(1)</code> and it prints <code>'hi'</code>. </li>
  <li>The second <code>console.log</code> is <code>(2)</code>, and it prints the content saved into the object <code>myHeader</code>. </li>
  <li>But the <code>console.log</code> number <code>(3)</code>, sometimes doesn't print anything, or it prints <code>undefined</code>. </li>
  </ul>
  
  <p>What am I misunderstanding about JavaScript functions?</p>
  
  <pre><code>$(function() {
  
  $(".myMarkup").click(function() {   
      $( "#dialog-form" ).dialog("open", function() {
          console.log(myHeader.getContent());  //(3)
      });
  });
  
  
  Header = function() {
      var val='hi';
      this.getContent = function() { return val; }
      this.setContent = function(x) { val = x; }
  };
  
  Content = function() {
      var val='hi';
      this.getContent = function() { return val; }
      this.setContent = function(x) { val = x; }
  };
  
  var myContent = new Content();
  var myHeader = new Header();
      console.log(myHeader.getContent());  //(1)
  
  
  $( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
      "Modify": function() {
      a = document.getElementById('name').value.toString();
      b = document.getElementById('surname').value.toString();    
      myHeader.setContent(a);
      myContent.setContent(b);
      console.log(myHeader.getContent(a)); //(2)
      },
    }
  )};
  </code></pre>