javascript - 如何不断添加到购物清单中的总价格中

Question

我正在尝试编写一个程序，该程序会随着用户在文本框区域中不断输入/添加更多项目而不断增加显示的当前总价格。每次用户在文本框中输入/添加项目时，我编写的代码当前都会重置价格。请问我该如何解决这个问题。我需要将项目和价格添加到文本框中以添加到当前显示的 amkunt 中，而不是从头开始。

             function getPrice(itemField) {
            return itemField.value || 0;
        }

        function updateItemfield(itemField) {
            var item = getPrice(itemField);
            
            if (getPrice(itemField)) {
                itemField.value = item;
            } else {
                itemField.value = itemField.defaultValue;
            }
        }

        function displayItems(disp, goods) {
            hide(disp);
            if (goods != 0) {
                show(disp);
                disp.innerHTML =  goods;

            }
        }

        function getQuantity(quantityField) {
            return parseInt(quantityField.value, 10) || 0;
        }

        function updateItemQuantity(itemField, quantityField) {
            var quantity = getQuantity(quantityField);
            if (quantity < 1) {
                quantity = 1;
            }
            
            if (getPrice(itemField)) {
                quantityField.value = quantity;
            } else {
                quantityField.value = quantityField.defaultValue;
            }
        }

        function getItemTotal(itemField, quantityField) {
            return getPrice(itemField) * getQuantity(quantityField);
        }

        function hide(el) {
            el.className = 'hidden';
        }

        function show(el) {
            el.className = '';
        }

        function updateTotal(el, amount) {
            hide(el);
            if (amount > 0) {
                show(el);
                el.innerHTML = "Your Order Total is $" + amount;
            }
        }
            
        function forEachFormItem(form, items, func) {
            var i,
                item,
                itemField,
                quantityField,
                result = 0;
            for (i = 0; i < items.length; i += 1) {
                item = items[i];
                itemField = form.elements[item],
                quantityField = form.elements[item + 'quantity'],
                result += func(itemField, quantityField);
            }
            return result;
        }

        // function addRecord() {
        //   var inp = document.getElementById('inputtext');
        //   quotes.push(inp.value);
        //   inp.value = "";  
        // }

        function calculateTotal() {
            var form = this,
                items = ['wine'],
                total = 0,
                priceField = form.priceField;

            
            forEachFormItem(form, items, updateItemQuantity);
            total = forEachFormItem(form, items, getItemTotal);


            updateTotal(priceField, total);
        }

        var goods = [];

        function addItems() {
          var inp = document.getElementById('inputtext');
          goods.push(inp.value);
          inp.value = "";  
        }

        function newItem() {
          document.getElementById("itemDisplay").innerHTML = goods.join(", ");
        }        

        var theForm = document.getElementById('order');
        theForm.priceField = document.getElementById('totalPrice');
        theForm.onchange = calculateTotal;

  .hidden {
        display: none;
        }

<form id="order" method="post" action="mailto:[e-mail]">
        <fieldset id="selections">
            <legend><strong>Your Selections</strong></legend>
            <img class="wine" src="wine.png" alt="Select Your Items!!"> 
           

            <p>
                <label>Wine:</label> 
                <input type="text" name="" id="inputtext" placeholder="item">
                <input type="text"  name="wine" value="0" size="8">
                <input type="text" name="winequantity" value="Quantity" size="8">
                <button type="button" id="add" onclick="addItems(), newItem()";>Add </button>
            </p>
        </fieldset>
        <h1>Items</h1>
    <div id="itemDisplay">

    </div>
    
    <br>
        <input type="submit" value="Place order">
    </form>


    <div id="totalPrice"></div>

标签： javascripthtmlcssshopping-cartaddition

Answer 1

问题是您没有将输入的商品存储在任何地方，您只是存储名称。

我建议不要只存储名称，而是存储一个包含附加商品的对象以及总金额。

function getPrice(itemField) {
  return itemField.value || 0;
}

function updateItemfield(itemField) {
  var item = getPrice(itemField);

  if (getPrice(itemField)) {
    itemField.value = item;
  } else {
    itemField.value = itemField.defaultValue;
  }
}

function displayItems(disp, goods) {
  hide(disp);
  if (goods != 0) {
    show(disp);
    disp.innerHTML = goods;

  }
}

function getQuantity(quantityField) {
  return parseInt(quantityField.value, 10) || 0;
}

function updateItemQuantity(itemField, quantityField) {
  var quantity = getQuantity(quantityField);
  if (quantity < 1) {
    quantity = 1;
  }

  if (getPrice(itemField)) {
    quantityField.value = quantity;
  } else {
    quantityField.value = quantityField.defaultValue;
  }
}

function getItemTotal(itemField, quantityField) {
  return getPrice(itemField) * getQuantity(quantityField);
}

function hide(el) {
  el.className = 'hidden';
}

function show(el) {
  el.className = '';
}

function updateTotal(el, amount) {
  hide(el);
  if (amount > 0) {
    show(el);
    el.innerHTML = "Your Order Total is $" + amount;
  }
}

function forEachFormItem(form, items, func) {
  var i,
    item,
    itemField,
    quantityField,
    result = 0;
  for (i = 0; i < items.length; i += 1) {
    item = items[i];
    itemField = form.elements[item],
      quantityField = form.elements[item + 'quantity'],
      result += func(itemField, quantityField);
  }
  return result;
}

// function addRecord() {
//   var inp = document.getElementById('inputtext');
//   quotes.push(inp.value);
//   inp.value = "";  
// }

function calculateTotal() {
  var form = this,
    items = ['wine'],
    total = 0,
    priceField = form.priceField;


  // Get total goods and update total
  total = goods.reduce((a, c) => a + c.total, 0);

  updateTotal(totalPrice, total);
}

var goods = [];

function addItems() {
  var inp = document.getElementById('inputtext');
  // Calculate total price
  const itemField = theForm.elements['wine'];
  const quantityField = theForm.elements['winequantity'];
  const total = getItemTotal(itemField, quantityField);
  // Store name and total price
  goods.push({name: inp.value, total});
  inp.value = "";
}

function newItem() {
  document.getElementById("itemDisplay").innerHTML = goods.map(x => x.name).join(", ");
}

var theForm = document.getElementById('order');
theForm.priceField = document.getElementById('totalPrice');

.hidden {
  display: none;
}

<form id="order" method="post" action="mailto:[e-mail]">
  <fieldset id="selections">
    <legend><strong>Your Selections</strong></legend>
    <img class="wine" src="wine.png" alt="Select Your Items!!">


    <p>
      <label>Wine:</label>
      <input type="text" name="" id="inputtext" placeholder="item">
      <input type="text" name="wine" value="0" size="8">
      <input type="text" name="winequantity" placeholder="Quantity" size="8">
      <button type="button" id="add" onclick="addItems(), newItem(), calculateTotal()" ;>Add </button>
    </p>
  </fieldset>
  <h1>Items</h1>
  <div id="itemDisplay">

  </div>

  <br>
  <input type="submit" value="Place order">
</form>


<div id="totalPrice"></div>