title: Append displaying 'undefined'
body: <p>I am a having a problem with a in-class problem. The user inputs three different things in input fields. We use Materialize and our own site.js file for the JavaScript and jQuery but also the Materialize CSS and JavaScript files and the jQuery script. I can successfully input the beer, the type, and price; and the site will store it in an array and everything. But when I try to create the beer with objects via jQuery, the beer shows up as undefined.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('select').material_select();
  
  var beers = [];
  var Beer = function(alcohol, style, price) {
  
    this.alcohol = alcohol;
    this.style = style;
    this.price = price;
  
  };
  
  
  $("#btnCreateBeer").on("click", function() {
  
    var alcohol = $("#txtName").val();
  
    var style = $("#dboStyle").val();
  
    var price = $("#txtPrice").val();
  
    beers.push(new Beer(alcohol, style, price));
  
    console.log(beers);
  
    $("#tblBeers").append('&lt;tr&gt;' +
      '&lt;td&gt;' + beers.alcohol + '&lt;/td&gt;' +
      '&lt;td&gt;' + beers.style + '&lt;/td&gt;' +
      '&lt;td&gt;' + beers.price + '&lt;/td&gt;' +
      '&lt;/tr&gt;');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col s4"&gt;
  
        &lt;div class="input-field"&gt;
          &lt;input placeholder="Name" id="txtName" type="text"&gt;
          &lt;label for="txtName"&gt;Name&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="input-field"&gt;
          &lt;select id="dboStyle"&gt;
                              &lt;option value="" disabled selected&gt;Choose your option&lt;/option&gt;
                              &lt;option value="Ale"&gt;Ale&lt;/option&gt;
                              &lt;option value="Lager"&gt;Lager&lt;/option&gt;
                              &lt;option value="Stout"&gt;Stout&lt;/option&gt;
                              &lt;option value="Pilsner"&gt;Pilsner&lt;/option&gt;
                              &lt;option value="Porter"&gt;Porter&lt;/option&gt;
                              &lt;option value="Wheat"&gt;Wheat&lt;/option&gt;
                          &lt;/select&gt;
          &lt;label&gt;Style&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="input-field"&gt;
          &lt;input placeholder="Price" id="txtPrice" type="text"&gt;
          &lt;label for="txtPrice"&gt;Price&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="btn" id="btnCreateBeer"&gt;Create&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col s8"&gt;
  
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Style&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id="tblBeers"&gt;&lt;/tbody&gt;
        &lt;/table&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/materialize.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/site.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>