Javascript 追加显示'；未定义'；

我在课堂上遇到了一个问题。用户在输入字段中输入三种不同的内容。我们对JavaScript和jQuery使用Materialize和我们自己的site.js文件，但也使用Materialize CSS和JavaScript文件以及jQuery脚本。我可以成功输入啤酒、类型和价格；网站将把它存储在一个数组中。但是，当我试图通过jQuery使用对象创建啤酒时，啤酒显示为未定义

$（'select'）。材料选择（）；
var beers=[]；
var啤酒=功能（酒精、风格、价格）{
酒精=酒精；
这个。风格=风格；
这个价格=价格；
};
$（“#btnCreateBeer”）。在（“单击”，函数（）{
var酒精=$（“#txtName”）.val（）；
var style=$（“#dboStyle”）.val（）；
var价格=$（“#txtPrice”）.val（）；
啤酒。推送（新啤酒（酒精、风格、价格））；
原木（啤酒）；
$（“#tblBeers”）。追加（“”+
''啤酒+酒精''+
''+啤酒，风格+''的+
''+啤酒，价格+''+
'');
});

名称
选择你的选择
麦芽酒
啤酒
粗壮的
皮尔斯纳
搬运工人
小麦
风格
价格
创造
名称
风格
价格
用此代码替换appendtr

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

$（“#btnCreateBeer”）。在（“单击”，函数（）{
var酒精=$（“#txtName”）.val（）；
console.log（酒精）；//测试酒精
var style=$（“#dboStyle”）.val（）；
console.log（style）；//测试样式
var价格=$（“#txtPrice”）.val（）；
console.log（price）；//测试价格
啤酒。推送（新啤酒（酒精、风格、价格））；
//****推送后，您可以找到相同的值
console.log（酒精）；//测试酒精
console.log（style）；//测试样式
console.log（price）；//测试价格
$（“#tblBeers”）。追加（“”+
''酒精+''+
''+风格+''+
''价格+''+
'');
});
用此代码替换appendtr

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

$（“#btnCreateBeer”）。在（“单击”，函数（）{
var酒精=$（“#txtName”）.val（）；
console.log（酒精）；//测试酒精
var style=$（“#dboStyle”）.val（）；
console.log（style）；//测试样式
var价格=$（“#txtPrice”）.val（）；
console.log（price）；//测试价格
啤酒。推送（新啤酒（酒精、风格、价格））；
//****推送后，您可以找到相同的值
console.log（酒精）；//测试酒精
console.log（style）；//测试样式
console.log（price）；//测试价格
$（“#tblBeers”）。追加（“”+
''酒精+''+
''+风格+''+
''价格+''+
'');
});
问题在于，您像访问对象一样访问数组。查看事件处理程序，每次单击都将啤酒存储在一个数组中，并将其添加为表行。我已经修改了下面的事件处理程序，将当前啤酒存储在一个数组中并附加到表中

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

$（“#btnCreateBeer”）。在（“单击”，函数（）{
var酒精=$（“#txtName”）.val（）；
var style=$（“#dboStyle”）.val（）；
var价格=$（“#txtPrice”）.val（）；
var啤酒=新啤酒（酒精、风格、价格）；
啤酒。推（啤酒）；
原木（啤酒）；
$（“#tblBeers”）。追加（“”+
''啤酒，酒精''+
''啤酒，风格+''+
''啤酒，价格+''+
'');
});
问题在于，您像访问对象一样访问数组。查看事件处理程序，每次单击都将啤酒存储在一个数组中，并将其添加为表行。我已经修改了下面的事件处理程序，将当前啤酒存储在一个数组中并附加到表中

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

$（“#btnCreateBeer”）。在（“单击”，函数（）{
var酒精=$（“#txtName”）.val（）；
var style=$（“#dboStyle”）.val（）；
var价格=$（“#txtPrice”）.val（）；
var啤酒=新啤酒（酒精、风格、价格）；
啤酒。推（啤酒）；
原木（啤酒）；
$（“#tblBeers”）。追加（“”+
''啤酒，酒精''+
''啤酒，风格+''+
''啤酒，价格+''+
'');
});
这是因为
beers
是一个
数组
，您试图访问
数组
上的
对象
属性。您需要添加新创建的
对象
。试试这个：

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

var newBeer=新啤酒（酒精、风格、价格）；
啤酒。推（纽比尔）；
$（“#tblBeers”）。追加（“”+
''+newBeer.酒精+''+
''+newBeer.style+''+
''+newBeer.price+''+
'');
这是因为
beers
是一个
数组
，您试图访问
数组
上的
对象
属性。您需要添加新创建的
对象
。试试这个：

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

var newBeer=新啤酒（酒精、风格、价格）；
啤酒。推（纽比尔）；
$（“#tblBeers”）。追加（“”+
''+newBeer.酒精+''+
''+newBeer.style+''+
''+newBeer.price+''+
'');
您得到的
未定义
是因为to在访问
数组
中的值时犯了一个小错误，这里
啤酒
是数组而不是对象。您得到的
未定义
是因为to在访问
数组
中的值时犯了一个小错误，这里的
beers
是一个数组而不是一个对象。你能解释一下吗？因为你已经找到了酒精、风格、价格的价值。所以使用数组。您可以直接使用，数组只是用来存储您的值@Itzmukeshy7你能解释一下吗？因为你已经发现了酒精的价值、风格、价格。所以使用数组。您可以直接使用，数组只是用来存储您的值@伊兹穆克什7