Adding array of value in javascript

I’m asking this question again and hope I get the answer this time, I have an array of number that adds and subtract on button click which works withonclick and a function created. I will like the sum up of the array 21998 and 11999 when this same button is click and will like to display the value in  find screenshot of what my array looks like:

I have an onClick function that multiple quantity with total every time - and + are clicked. I will like the sum-up of 21,998 and 11,999 when - and + are clicked. Below is what my HTML code and PHP script look like:

<p id = "sumTotal"></p>
    <table class="table table-cart table-mobile">
        <thead>
            <tr>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
        <? for($i=0;$i<count($_SESSION['img_src']);$i++){ ?>
        <tr>
    <td class="price-col" id="<? echo $_SESSION['id'][$i].'_price' ?>" >₦<?php echo $_SESSION['price'][$i] ?></td>

            <td>
                <div onclick="clickMe(<?php echo  $_SESSION['id'][$i]; ?>)">
                    <input type="number" value="1" min="1" max="10" step="1" data-decimals="0" required id = "<? echo $_SESSION['id'][$i].'_quantityCount' ?>">
                </div><!-- End .cart-product-quantity -->
            </td>
            <td id = "<? echo $_SESSION['id'][$i].'_totalPrice' ?>">₦<?php echo $_SESSION['price'][$i] ?></td>
        </tr>
    
    <?
        }
    ?>
<tbody>
    </table>

And my javascript onclick looks like below code:

    <script>
        function clickMe(id) {
           var price = document.getElementById(id+"_price").innerHTML;
           let finalPrice =  price.replace(/[^a-zA-Z0-9]/g, '')
           var quantity = document.getElementById(id+"_quantityCount").value;
           var totalPrice = quantity * finalPrice;
           document.getElementById(id+"_totalPrice").innerHTML = "u20A6"+totalPrice.toString().replace(/B(?=(d{3})+(?!d))/g, ",");


          
        }
    </script>

I will like to get the sum total of 21,998 and 11,999to 

Answer

I was able to solve this myself, at first on the load of the page I sum up the all prices to get my initial sumTotal and did that in PHP with $subTotal_sum = array_sum( str_replace(",", "", $_SESSION['price']));. So  will be echo array_sum( str_replace(",", "", $_SESSION['price'])); And inside my javascript I made the changes with the script, I get the value of sumTotal subtracted it from Price and add the sumTotal and new price after + or - to get the new sumTotal below is my update code:

  <p id = "sumTotal">$subTotal_sum = array_sum( str_replace(",", "", $_SESSION['price']));</p>
    <table class="table table-cart table-mobile">
        <thead>
            <tr>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
        <? for($i=0;$i<count($_SESSION['img_src']);$i++){ ?>
        <tr>
    <td class="price-col" id="<? echo $_SESSION['id'][$i].'_price' ?>" >₦<?php echo $_SESSION['price'][$i] ?></td>

            <td>
                <div onclick="clickMe(<?php echo  $_SESSION['id'][$i]; ?>)">
                    <input type="number" value="1" min="1" max="10" step="1" data-decimals="0" required id = "<? echo $_SESSION['id'][$i].'_quantityCount' ?>">
                </div><!-- End .cart-product-quantity -->
            </td>
            <td id = "<? echo $_SESSION['id'][$i].'_totalPrice' ?>">₦<?php echo $_SESSION['price'][$i] ?></td>
        </tr>
    
    <?
        }
    ?>
<tbody>
    </table>

    <script>
        function clickMe(id) {
            var sumTotal = document.getElementById("sumTotal").value;
           var price = document.getElementById(id+"_price").innerHTML;

           var initialSumTotal = parseInt(sumTotal) - parseInt(price);
           
           let finalPrice =  price.replace(/[^a-zA-Z0-9]/g, '')
           var quantity = document.getElementById(id+"_quantityCount").value;
           var totalPrice = quantity * finalPrice;
           document.getElementById(id+"_totalPrice").innerHTML = "u20A6"+totalPrice.toString().replace(/B(?=(d{3})+(?!d))/g, ",");

            var sumTotal= parseInt(initialSumTotal)+parseInt(totalPrice);
         
         // parsing the value to display on sub total
          document.getElementById("sumTotal").value ="u20A6"+sumTotal.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
        
          
        }
    </script>

Advertisement

Answer