如何将按钮的文本设置为我创建的对象的字段？

Question

我创建了一个名为 Category 的类，其成员是一个列表，类型为 Dish（我创建的另一个类）。我正在尝试创建一个按钮的网格容器，这些按钮为列表中的每个菜肴显示一个按钮，并且按钮的文本将与菜肴名称匹配。我正在使用for循环来创建按钮，但是当我尝试将按钮文本添加为菜肴名称“”时，没有任何显示。我认为我不太擅长创建一个列表和一个对象，以及如何在javascript中调用一个对象的字段。请让我知道我做错了什么，或者是否有更好的方法可以解决这个问题，任何建议将不胜感激。断续器btn.innerText = categor.dishes[i].name;这是类菜public class Dish    {        public string name;        public int price;        public Dish(string foodName, int foodPrice)        {            name = foodName;            price = foodPrice;        }        public string Name { get; set; }        public int Price { get; set; }    }这是类类别  public class category        {            public string name;            public IList<Dish> dishes;            public category(string Name, IList<Dish> Dishes)            {                name = Name;                IList<Dish> dishes = Dishes;        }        public string Name { get; set; }        public IList<Dish> Dishes { get; set; }    }这是视图中的代码  <style>        .categories-buttons {            display: grid;            grid-template-columns: 80px 80px 80px 80px 80px;        }        .item {            padding: 10px;        }    </style>    <!--  <div class="categories-buttonsDisplay">    <input type="text" class="calculator-screen" value="0" disabled />-->    <div class="categories-buttons">    </div>    <script>        var dish1 = { name: sweetpatato, price: 64 };        var dish2 = { name: mushroom, price: 89 };        var dish3 = { name: halomi, price: 76 };        var list = { dish1, dish2, dish3 };        var categor = { name: salads, dishes: list };        var div = document.getElementsByClassName("categories-buttons")[0];        for (var i = 0; i < list.length; i++) {            var btn = document.createElement("button");            btn.innerText = categor.dishes[i].name;            div.append(btn);        }    </script>

Answer 1

首先，list.length将为您提供未定义的，因为list是像对象一样创建的，而不是像数组一样，所以你应该用这些'['， ']'替换大括号

其次，设置名称时会出现错误。为了设置一个字符串，你应该像这样设置它们：名称：'sweetpatato'

下面是一个代码的工作示例：

<style>

.categories-buttons {

    display: grid;

    grid-template-columns: 80px 80px 80px 80px 80px;

}

.item {

    padding: 10px;

}

</style>

<div class="categories-buttons">

</div>

<script>

var dish1 = { name: 'sweetpatato', price: 64 };

var dish2 = { name: 'mushroom', price: 89 };

var dish3 = { name: 'halomi', price: 76 };

var list = [dish1, dish2, dish3];

var categor = { name: 'salads', dishes: list };

var div = document.getElementsByClassName("categories-buttons")[0];

for (var i = 0; i < list.length; i++) {

    var btn = document.createElement("button");

    btn.innerText = categor.dishes[i].name;

    div.append(btn);

}

</script>