title: Updating HTML string containing a variable after the variable is updated in jQuery
body: <p>I'm trying to create a website which uses jQuery to update a div to display a message which uses variable values which are updated only after a button is clicked. </p>
  
  <p>I'm creating a full name by randomly selecting from a list of firstname objects and lastname objects. The first name determines the age of the individual, and the last name determines what text appears. However, sometimes that text includes their first and last name (Ex: <code>"Hi, I am " + fullname + ". Nice to meet you."</code>) . For practical purposes, the jQuery is set up like this:</p>
  
  <pre><code>$(document).ready(function(){
      var firstname_list = [];
      var lastname_list = [];
      var fullname;
      function firstname(name, age) {
          this.name = name;
          this.age = age;
          firstname_list.push(this);
      }
      function lastname(name, quote) {
          this.name = name;
          this.quote = quote;
          lastname_list.push(this);
      }
      var MIKE = new firstname("Mike ", "23");
      var BRAD = new firstname("Brad ", "28");
      var JOEY = new firstname("Joey ", "13");
      var DIAZ = new lastname("Diaz", "Hi, my name is " + fullname + ". Nice to meet you.");
      var SMITH= new lastname("Smith", "Hey. What's up?");
      $('button').click(function() {
          var fetched_firstname = firstname_list[Math.floor(Math.random() * firstname_list.length)];
          var fetched_lastname = lastname_list[Math.floor(Math.random() * lastname_list.length)];
          fullname = (fetched_firstname['name'] + fetched_lastname['name']);
          $('#quote_div').html(fetched_lastname['quote']);
      }
  }
  </code></pre>
  
  <p>And let's say there's a portion of the HTML that looks like this:</p>
  
  <pre><code>&lt;div id="quote_div"&gt;THE QUOTE GOES HERE AFTER THE BUTTON IS CLICKED&lt;/div&gt;
  </code></pre>
  
  <p>When the button is clicked, a random First and Last name are generated. However, if the last name's <code>['quote']</code> property contains <code>+ fullname +</code> as part of the string (if the lastname is "Diaz"), it will print "undefined" instead of the concatenated full name I created in the jQuery button click event. I'm assuming that this is because the object is created before the button is ever clicked, and the button's script doesn't retroactively let the object's <code>['quote']</code> property value know that <code>fullname</code> has been updated.</p>
  
  <p>How can I work around this? I need the user to be able to keep clicking the randomizing button to generate new name combinations, so I can't load everything when the DOM is ready.</p>