Trying to add together multiple inputs in the same input field to get total value-CodePudding

tried cutting the code down as much as possible.

Issue: I'm trying to get the total price of new array objects that are being created from inputs by the user, i tried making a new function that grabs the input, but it changes to the new value in the input field whenever a new item is added. Price also wont change when the user deletes an object from the array.

const itemTotalPrice = document.getElementById("total-price")
const itemContainer = document.getElementById("item-container")
const itemListmore = document.getElementById("item-list-more")

var itemArrayMore = [];


//Functions for user input for item name and price

function additemmore () {
    let itemNameInput = document.getElementById("item-name-more").value;
    let itemPriceInput = document.getElementById("item-price-more").value;
    
    if(document.getElementById("item-name-more").value.length == 0)
    {
        alert("Need a name")
        return false;
    }
    
    if(document.getElementById("item-price-more").value.length == 0)
    {
        alert("Need a price")
        return false;
    }

    if(document.getElementById("item-price-more").value === 0)
    {
        alert("Value cannot be 0 or lower")
        return false;
    }

    itemArrayMore.push({
        name: itemNameInput,
        price: itemPriceInput   "kr",
    });

    console.log("New Array:", itemArrayMore);
    listItemsMore();
    priceTotal()
}

function listItemsMore(){
    itemListmore.innerHTML ="";
    for(let i = 0; i < itemArrayMore.length; i  ){

     itemListmore.innerHTML  = `<li><h1>${itemArrayMore[i].name}</h1>
     <h2 id="item-price">${itemArrayMore[i].price}</h2>
     <button id="delete-btn" onclick="deleteitemmore(${i})">Delete</button></li>`;
     
     
    }
}

function deleteitemmore(i) {
    let del = "Are you sure you want to delete the selected item?";
    if (confirm(del) == true) {
        itemArrayMore.splice(i, 1);
            listItemsMore();
    } else {
        alert

    }
  }
  
  //Function for total price. Goal is to get every input and display it as a total price for the user. 
//If possible also remove value if related item is deleted.
  
  function priceTotal() {
    var price = document.getElementById("item-price-more").value;
    var total =  price;
    
    document.getElementById("total-price").innerHTML = total;
     
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
    <h1>Shopping list</h1>
    <div id="item-container" >
    <div >    
    <input
    type="text"
    id="item-name-more"
    placeholder="Item name"
    />
    <!--for some reason you can add the letter e in the input for price-->
    <input
    type="number"
    id="item-price-more"
    placeholder="Write name of item!"
    />
    <button onclick="additemmore()">Add</button>
    <ul id="item-list-more"></ul>
    <ul>Total Price: <span id="total-price">0</span></ul>
    </div>
    </div>
<script src="index.js"></script>
</body>
</html>

CodePudding user response：

Make total a global variable. Then you can add to it when you add a new item, and subtract from it when you delete an item.

const itemTotalPrice = document.getElementById("total-price")
const itemContainer = document.getElementById("item-container")
const itemListmore = document.getElementById("item-list-more")

var itemArrayMore = [];
var total = 0;

//Functions for user input for item name and price

function additemmore() {
  let itemNameInput = document.getElementById("item-name-more").value;
  let itemPriceInput = document.getElementById("item-price-more").value;

  if (document.getElementById("item-name-more").value.length == 0) {
    alert("Need a name")
    return false;
  }

  if (document.getElementById("item-price-more").value.length == 0) {
    alert("Need a price")
    return false;
  }

  if (document.getElementById("item-price-more").value === 0) {
    alert("Value cannot be 0 or lower")
    return false;
  }

  itemArrayMore.push({
    name: itemNameInput,
    price: itemPriceInput   "kr",
  });

  console.log("New Array:", itemArrayMore);
  listItemsMore();
  priceTotal()
}

function listItemsMore() {
  itemListmore.innerHTML = "";
  for (let i = 0; i < itemArrayMore.length; i  ) {

    itemListmore.innerHTML  = `<li><h1>${itemArrayMore[i].name}</h1>
     <h2 id="item-price">${itemArrayMore[i].price}</h2>
     <button id="delete-btn" onclick="deleteitemmore(${i})">Delete</button></li>`;


  }
}

function deleteitemmore(i) {
  let del = "Are you sure you want to delete the selected item?";
  if (confirm(del) == true) {
    total -=  itemArrayMore[i].price.replace('kr', '');
    document.getElementById("total-price").innerHTML = total;
    itemArrayMore.splice(i, 1);
    listItemsMore();

  } else {
    alert
  }
}

//Function for total price. Goal is to get every input and display it as a total price for the user. 
//If possible also remove value if related item is deleted.

function priceTotal() {
  var price = document.getElementById("item-price-more").value;
  total  =  price;

  document.getElementById("total-price").innerHTML = total;

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <h1>Shopping list</h1>
  <div id="item-container" >
    <div >
      <input type="text" id="item-name-more" placeholder="Item name" />
      <!--for some reason you can add the letter e in the input for price-->
      <input type="number" id="item-price-more" placeholder="Write name of item!" />
      <button onclick="additemmore()">Add</button>
      <ul id="item-list-more"></ul>
      <ul>Total Price: <span id="total-price">0</span></ul>
    </div>
  </div>
  <script src="index.js"></script>
</body>

</html>