时间戳

首页 > 解决方案 > 如何使用 JavaScript 将按钮元素绑定到对象？

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

问题描述

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

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

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

}

应用程序当前形式的图片

标签： javascripthtmlweb-applications

解决方案

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

推荐阅读