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

Question

I'm trying to get the total price of values entered. It displays like this.

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

During the computation, different products should be computed separately and same product names should be computed as one - to be displayed in the the Like this.

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

I tried many times by calling or filtering, but it doesn't seem to work. Not really sure now what I should do first. Can you help me?

Here is my html code

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

And here is my Javascript. I only have the code to add the product invetories. I still do not have the compute function yet. I delete my code as i am not sure now where to start.

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

this will be your js code

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

and your HTML code

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

First you need to convert the price value to integer because

document.getElement*("").value

gives you string, but you have to add the values. In this case you nedd to convert the string to integer using

parseInt(string)

or

Number(string)

or

parseFloat(string)

You just have to declare a "sum" variable and then add the values of arrayin for loop. This is how you can get the sum of all items