追加顯示'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>'); 
});