Question

我正在开发一个浏览器收银机应用程序，可让您将项目和附加价格添加到收银台div。从那里，您可以（理论上）单击“添加项目”按钮以记录该项目，然后显示总价格。

我通过使用JavaScript获取文本信息并使用各种类创建元素来实现这一目标。每个项目div包含一个“添加项目”按钮，但我不知道如何使按钮记录按钮所包含的项目。我使用数组创建了一组对象，并将price字段转换为对象属性。

function addNewItem() {
    var inputFieldValue = document.getElementById("nameInputField").value;
    var textNode = document.createTextNode(inputFieldValue);
    var createDiv = document.createElement("div");
    var createP = document.createElement("p");
    var createImg = document.createElement("img");
    var createButton = document.createElement("button");
    var containerDiv = document.getElementById("itemContainer");
    var addItemText = document.createTextNode("Add Item");
    var priceValue = document.getElementById("priceInputField").value;
    var objs = [];
    i++;
    objs[i] = new Object();
    objs[i].price = priceValue;
    createDiv.className = "groceryItem";
    createDiv.id = "groceryItem";
    createP.className = "itemName";
    createP.id = "itemName";
    createImg.className = "itemImage";
    createImg.id = "itemImage";
    createImg.src = inputFieldValue + ".jpg";
    createButton.className = "addItem";
    createButton.id = inputFieldValue;
    createP.appendChild(textNode);
    createDiv.appendChild(createP);
    createDiv.appendChild(createImg);
    createButton.appendChild(addItemText);
    createDiv.appendChild(createButton);
    containerDiv.appendChild(createDiv);  

}

A picture of the app in its current form

Answer 1

您是否尝试将对象推送到阵列？ https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push

如何使用JavaScript将按钮元素绑定到对象？

1 个答案: