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.

$('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('<tr>' +
    '<td>' + beers.alcohol + '</td>' +
    '<td>' + beers.style + '</td>' +
    '<td>' + beers.price + '</td>' +
    '</tr>');
});

<div class="container">
  <div class="row">
    <div class="col s4">

      <div class="input-field">
        <input placeholder="Name" id="txtName" type="text">
        <label for="txtName">Name</label>
      </div>

      <div class="input-field">
        <select id="dboStyle">
                            <option value="" disabled selected>Choose your option</option>
                            <option value="Ale">Ale</option>
                            <option value="Lager">Lager</option>
                            <option value="Stout">Stout</option>
                            <option value="Pilsner">Pilsner</option>
                            <option value="Porter">Porter</option>
                            <option value="Wheat">Wheat</option>
                        </select>
        <label>Style</label>
      </div>

      <div class="input-field">
        <input placeholder="Price" id="txtPrice" type="text">
        <label for="txtPrice">Price</label>
      </div>

      <div class="btn" id="btnCreateBeer">Create</div>

    </div>
    <div class="col s8">

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Style</th>
            <th>Price</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="tblBeers"></tbody>
      </table>

    </div>
  </div>
</div>

<script type="text/javascript" src=".1.1.min.js"></script>
<script src=".98.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="js/site.js"></script>

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.

$('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('<tr>' +
    '<td>' + beers.alcohol + '</td>' +
    '<td>' + beers.style + '</td>' +
    '<td>' + beers.price + '</td>' +
    '</tr>');
});

<div class="container">
  <div class="row">
    <div class="col s4">

      <div class="input-field">
        <input placeholder="Name" id="txtName" type="text">
        <label for="txtName">Name</label>
      </div>

      <div class="input-field">
        <select id="dboStyle">
                            <option value="" disabled selected>Choose your option</option>
                            <option value="Ale">Ale</option>
                            <option value="Lager">Lager</option>
                            <option value="Stout">Stout</option>
                            <option value="Pilsner">Pilsner</option>
                            <option value="Porter">Porter</option>
                            <option value="Wheat">Wheat</option>
                        </select>
        <label>Style</label>
      </div>

      <div class="input-field">
        <input placeholder="Price" id="txtPrice" type="text">
        <label for="txtPrice">Price</label>
      </div>

      <div class="btn" id="btnCreateBeer">Create</div>

    </div>
    <div class="col s8">

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Style</th>
            <th>Price</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="tblBeers"></tbody>
      </table>

    </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="js/site.js"></script>

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 10, 2017 at 6:50 Sebastian Simon 19.6k88 gold badges6161 silver badges8484 bronze badges asked Mar 10, 2017 at 6:48 Logan ComstockLogan Comstock 2111 silver badge66 bronze badges 1

• You are getting undefined because to are making a minor mistake in accessing the value from array, here beers is an array not an object. – itzmukeshy7 Commented Mar 10, 2017 at 7:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Problem is you're accessing the array like an object. Looking at your event handler, on every click you store beer in an array and add it as table row. I have modified your event handler below to store current beer in an array and append to table.

$("#btnCreateBeer").on("click", function() { 

  var alcohol = $("#txtName").val();

  var style = $("#dboStyle").val();

  var price = $("#txtPrice").val();

  var beer = new Beer(alcohol, style, price);
  beers.push(beer);

  console.log(beers);

  $("#tblBeers").append('<tr>' +
    '<td>' + beer.alcohol + '</td>' +
    '<td>' + beer.style + '</td>' +
    '<td>' + beer.price + '</td>' +
    '</tr>');
});

It is because beers is an array and you are trying to access object properties on an array. You need to append the newly created object. Try this:

var newBeer = new Beer(alcohol, style, price);
beers.push(newBeer);

$("#tblBeers").append('<tr>' +
'<td>' + newBeer.alcohol + '</td>' +
'<td>' + newBeer.style + '</td>' +
'<td>' + newBeer.price + '</td>' +
'</tr>');

Replace append tr with this code

 $("#btnCreateBeer").on("click", function() {

  var alcohol = $("#txtName").val();
  console.log(alcohol);   // test alcohol
  var style = $("#dboStyle").val(); 
  console.log(style);   // test style
  var price = $("#txtPrice").val();
  console.log(price);   // test price
  beers.push(new Beer(alcohol, style, price));

  //**** after push you can find same value

  console.log(alcohol);   // test alcohol
  console.log(style);   // test style
  console.log(price);   // test price

  $("#tblBeers").append('<tr>' +
    '<td>' + alcohol + '</td>' +
    '<td>' + style + '</td>' +
    '<td>' + price + '</td>' +
    '</tr>');
});