Question

我正在尝试获取输入的总价值。它显示如下。

   Example:
   Name: Chair, Stock: 4, Price: 100
   Name: Chair, Stock: 3, Price: 50
   Name: Table, Stock: 4, Price: 100

在计算过程中，应分别计算不同的产品，并且应将相同的产品名称计算为一个-并显示在“赞此”中。

chars in total: 550
table in total: 400
Total inventory price: 950

我通过调用或过滤尝试了很多次，但似乎不起作用。现在不确定我应该先做什么。你能帮我吗？

这是我的html代码

    <div>
        <h3>Part 2</h3>
        <form id="products" onsubmit="inventory(event)" action="#">
            <table>
                <tr>
                    <td>Name</td>
                    <td>: <input type="text" id="productName" required></td>
                </tr>
                <tr>
                    <td>Stocks</td>
                    <td>: <input type="text" id="productStock" required></td>
                </tr>
                <tr>
                    <td>Price</td>
                    <td>: <input type="text" id="prodPrice" required></td>
                </tr>
            </table>
            <input type="Submit" value="Add">
        </form>
        <h4>Product List</h4>
        <div id="inventoryList"></div>
        <input type="button" onclick="compute(event)" value="Calculate for local value for each product">
        <h4>Product Total Value</h4>
        <div id="inventorytotal"></div>
    </div>

这是我的Javascript。我只有用于添加产品需求的代码。我仍然没有计算功能。我删除了我的代码，因为现在不确定从哪里开始。

var prodInventory = []; 
function inventory(e){
    e.preventDefault();

    var products = {
        prodName: document.getElementById('productName').value,
        prodStock: document.getElementById('productStock').value,
        prodPrice: document.getElementById('prodPrice').value
    }

    prodInventory.push(products);
    var myJSON = JSON. stringify(products);
    document.forms[0].reset();

    //Display of Inventory List
    document.getElementById("inventoryList").innerHTML = "";
    for (let x in prodInventory) {
        document.getElementById("inventoryList").innerHTML += "name: " + prodInventory[x].prodName + " , " + "stocks : " +  prodInventory[x].prodStock + " , " + "price: " + prodInventory[x].prodPrice + "<br>";
        console.log(prodInventory)
    }

Answer 1

这将是您的js代码

var prodInventory = []; 
    function inventory(){

        var products = {
            prodName: document.getElementById('productName').value,
            prodStock: document.getElementById('productStock').value,
            prodPrice: parseInt(document.getElementById('prodPrice').value)
        }

        prodInventory.push(products);
        var myJSON = JSON. stringify(products);
        document.forms[0].reset();

        //Display of Inventory List
        document.getElementById("inventoryList").innerHTML = "";
        for (let x in prodInventory) {
            document.getElementById("inventoryList").innerHTML += "name: " + prodInventory[x].prodName + " , " + "stocks : " +  prodInventory[x].prodStock + " , " + "price: " + prodInventory[x].prodPrice + "<br>";
            console.log(prodInventory)
        }

        return false;
    }

    function compute() {
        document.getElementById("inventorytotal").innerHTML = "";
        var sum = 0;
        for (let x in prodInventory) {
            sum += prodInventory[x].prodPrice;
            document.getElementById("inventorytotal").innerHTML = sum;
            console.log(prodInventory)
        }
    }

和您的HTML代码

<div>
                            <h3>Part 2</h3>
                            <form id="products" onsubmit="inventory()" action="#">
                                <table>
                                    <tr>
                                        <td>Name</td>
                                        <td>: <input type="text" id="productName" required></td>
                                    </tr>
                                    <tr>
                                        <td>Stocks</td>
                                        <td>: <input type="text" id="productStock" required></td>
                                    </tr>
                                    <tr>
                                        <td>Price</td>
                                        <td>: <input type="text" id="prodPrice" required></td>
                                    </tr>
                                </table>
                                <input type="Submit" value="Add">
                            </form>
                            <h4>Product List</h4>
                            <div id="inventoryList"></div>
                            <input type="button" onclick="compute()"
                                value="Calculate for local value for each product">
                            <h4>Product Total Value</h4>
                            <div id="inventorytotal"></div>
                        </div>

首先，您需要将价格值转换为整数，因为

document.getElement*("").value

为您提供字符串，但是您必须添加值。在这种情况下，您需要使用

将字符串转换为整数。

parseInt(string)

或

Number(string)

或

parseFloat(string)

您只需要声明一个“ sum”变量，然后将arrayin的值添加到循环中即可。这样就可以获取所有项目的总和

如何获取存储在对象数组中的总价值-Javascript

1 个答案: