Как получить общее значение, хранящееся в массиве объектов - Javascript

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)

Вы просто должны объявить «сумму» переменной, а затем добавьте значения arrayin для l oop. Вот как вы можете получить сумму всех предметов