Javascript 创建已单击按钮的列表_Javascript

Javascript 创建已单击按钮的列表

javascript

Javascript 创建已单击按钮的列表,javascript,Javascript,注意：我知道在其他语言中可能有这样做的方法，但我只学过javascript 我有一个对象数组食物项目在这种情况下，每个项目有一个名称属性。我在for循环中使用了这段代码，它为数组中的每个项目生成按钮。如果数组中的第一个项目的名称为cake，那么cake的按钮称为cake，如果该项目的名称为fries，那么按钮的名称为fries。我希望用户能够为每个项目只单击一次按钮，当单击该按钮时，我希望显示单击的每个项目的列表。之所以使用var click=item[I].name，是因为我希望每个按钮都有该

注意：我知道在其他语言中可能有这样做的方法，但我只学过javascript

我有一个对象数组食物项目在这种情况下，每个项目有一个名称属性。我在for循环中使用了这段代码，它为数组中的每个项目生成按钮。如果数组中的第一个项目的名称为cake，那么cake的按钮称为cake，如果该项目的名称为fries，那么按钮的名称为fries。我希望用户能够为每个项目只单击一次按钮，当单击该按钮时，我希望显示单击的每个项目的列表。之所以使用var click=item[I].name，是因为我希望每个按钮都有该项的名称。这段代码为数组中的项创建一个按钮，但它不列出单击的项。这是我的密码：

HTML

JAVASCRIPT

由于您没有提供一个可复制的示例，我无法对此进行测试，但是，您应该能够使用类似的东西。请注意这些意见，并在必要时进行修改

window.onload = function() {

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

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

        const name = item[i].name;            

        // Set the button id
        btnItem.id = `btnItem-${name}`;

        // Set the button text to the item name
        btnItem.innerHTML = name

        btnItem.addEventListener('click', function (event) {
            event.target.disabled = true;

            // Do whatever you want here, e.g. add "name" to a list
        }
   }
}

按照你的意愿设计你的观点，但这应该能解决你的问题

可变项目=[{ 名称：蛋糕，价格:12 }, { 名称：薯条，价格:10 }, { 名称：苹果，价格:11 } ]; 对于let i=0；i 我创建了一个div来附加按钮

<html>
    <head>  
    </head>
    <body>
      <p id="likes">Likes: </p>
      <p id="clicks"></p>
      <div id="btn-container">
      </div>
    </body>
</html

Js代码：

请显示fast的完整代码solution@MrKhan我已经更新了我的问题HTML，请问你的蛋糕、薯条等的列表在哪里？我的列表在我的javascript文件@eugenunici中。JSON.stringify是什么意思？这也是javascript中使用的东西吗？我仍处于学习javascript的初级阶段，理解代码有困难。有没有一种方法可以只使用基本的javascript来实现这一点@尤金，你不应该用它。您希望在列表中显示什么？我希望数组中的所有内容都显示一个按钮。我希望按钮的名称是数组中项目的名称。然后，当用户单击按钮时，只能单击每个按钮一次，我想显示一个已单击项目的列表。从技术上讲，这是按钮名称，因为每个项目的按钮将具有项目名称iteself@EUGENSUNIC。单击项目按钮后，名称将显示在列表中。例如，如果您喜欢蛋糕和薯条，那么列表上会显示Likes:cake，fries@Eugun\u SunicI已经提供了我文件中的所有代码，我不确定还可以提供什么。我也不明白什么是btnItem.id=btnItem-${name}；表示或表示事件侦听器的用途@里斯·斯塔布斯韦尔：是的。我只是包含了代码的相关部分，没有显示任何列表@汗先生

window.onload = function() {

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

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

        const name = item[i].name;            

        // Set the button id
        btnItem.id = `btnItem-${name}`;

        // Set the button text to the item name
        btnItem.innerHTML = name

        btnItem.addEventListener('click', function (event) {
            event.target.disabled = true;

            // Do whatever you want here, e.g. add "name" to a list
        }
   }
}

<html>
    <head>  
    </head>
    <body>
      <p id="likes">Likes: </p>
      <p id="clicks"></p>
      <div id="btn-container">
      </div>
    </body>
</html

var items=[
{
name:"cake",
price:12
},
{
name:"fries",
price:10
},
{
name:"apple",
price:11
}
];



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

  var btnItems = document.createElement("button");
  btnItems.id = "btnItems"+i;
  var clicks = items[i].name;
  btnItems.innerHTML = clicks;

  document.getElementById("btn-container").appendChild(btnItems);
  console.log(btnItems);

  btnItems.addEventListener('click',function (el) {
  alert('here');
    el.disabled = true;
    clicks += items[i].name + i;
    document.getElementById("clicks").innerHTML = "Items Clicked" + clicks;
  });
 }