「未定義」の表示を追加する

Question

私はクラス内の問題に悩まされています。ユーザーは入力フィールドに3つの異なるものを入力します。 JavaScriptとjQueryの場合はマテリアライズと独自のsite.jsファイルを使用しますが、マテリアライズ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プロパティにアクセスしようとしているからです。新しく作成されたobjectをappendにする必要があります。これを試してみてください：

Answer 2

$("#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

問題は、あなたがオブジェクトのような配列にアクセスしているで、このコードでTRを追加交換してください。あなたのイベントハンドラを見ると、クリックごとにビールを配列に格納し、テーブル行として追加します。現在のビールを配列に格納してテーブルに追加するために、以下のイベントハンドラを変更しました。

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