追加显示'undefined'

Question

我有一个课堂问题。用户在输入字段中输入三个不同的东西。我们将Materialise和我们自己的site.js文件用于JavaScript和jQuery，但也使用Materialize CSS和JavaScript文件以及jQuery脚本。我可以成功输入啤酒，种类和价格;该网站将存储在一个数组和一切。但是当我尝试通过jQuery用对象创建啤酒时，啤酒显示为未定义。

$('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.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/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>

Answer 1

这是因为beers是array，并且您尝试在array访问object性能。您需要append新创建的object。试试这个吧：

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>'); 

Answer 2

更换追加TR与此代码

$("#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>'); 
}); 

Answer 3

问题是你所访问等的对象阵列。查看您的事件处理程序，每次点击时将啤酒存储在数组中并将其添加为表格行。我在下面修改了您的事件处理程序，将当前的啤酒存储在数组中并附加到表中。

$("#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>'); 
});