Question

当用户点击按钮以显示数组中的所有值时，如何将其添加到所有“到期金额”的总和中？例如，如果一个用户输入5美元，另一个用户输入10美元而另一个用户输入25美元，则总额将显示为40美元。

// Code goes here

var customerarray = [];

function displaydata() {
  var innerTemphtml = ' ';
  for (var i = 0; i < customerarray.length; i++) {

    innerTemphtml += customerarray[i].customerName + " " + customerarray[i].customerID + " " + customerarray[i].AmountDue;
  }
  document.getElementById('output').innerHTML = innerTemphtml;
}

function addtoarray() {
  customerarray.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: document.getElementById('Amount').value
  });
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <span>Customer Name: </span>
<input type="text" id='custName'/><br><br>
<span>Customer ID: </span>
<input type="text" id='CustID'/><br><br>
<span>Amount: </span>
<input type="text" id='Amount'/> <br><br>
<button onClick="addtoarray();" class="button" type = "button">add to array</button>
<button onClick="displaydata()" class="button" type = "button"> Display data</button>
<p id="output"></p>
  </body>

</html>

Answer 1

我已根据您的要求更改了您的代码，如下所示。希望它能解决您的问题

// Code goes here

var customerarray = [];

function displaydata() {
var total=0;
  var innerTemphtml = ' ';
  for (var i = 0; i < customerarray.length; i++) {

    innerTemphtml += customerarray[i].customerName + " " + customerarray[i].customerID + " " + customerarray[i].AmountDue+"<br/>";
    total+=parseInt(customerarray[i].AmountDue);
  }
  document.getElementById('output').innerHTML ="User Input Data <br/>" +innerTemphtml;
    document.getElementById('total').innerHTML = "Grand Total = "+total;

}

function addtoarray() {
  customerarray.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: document.getElementById('Amount').value
  });
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <span>Customer Name: </span>
<input type="text" id='custName'/><br><br>
<span>Customer ID: </span>
<input type="text" id='CustID'/><br><br>
<span>Amount: </span>
<input type="text" id='Amount'/> <br><br>
<button onClick="addtoarray();" class="button" type = "button">add to array</button>
<button onClick="displaydata()" class="button" type = "button"> Display data</button>
<p id="output"></p>
<p id="total"></p>

  </body>

</html>

Answer 2

将对象的"AmountDue"属性设置为数字，而不是.push()调用

中的字符串

Number(document.getElementById('Amount').value)

使用Array.prototype.reduce()一次添加两个数组元素，返回总和

let dues = customerarray.reduce((a, {AmountDue:b}) => a + b, 0);

Answer 3

你必须要看多种东西。我为你添加了一个显示due（）。这是我的js小提琴https://jsfiddle.net/jinspeter/1qxo50uz/
您必须为金额使用数字字段。并且还要将数量添加到Int解析为拒绝字符串。

  <body>
       <span>Customer Name: </span>
    <input type="text" id='custName'/><br><br>
    <span>Customer ID: </span>
    <input type="text" id='CustID'/><br><br>
    <span>Amount: </span>
    <input type="number" id='Amount'/> <br><br>
    <button onClick="addtoarray();" class="button" type = "button">add to array</button>
    <button onClick="displaydata()" class="button" type = "button"> Display data</button>
    <button onClick="displayTotalDue()" class="button" type = "button"> Display Due</button>
    <p id="output"></p>

      </body>

var customerarray = [];

function displaydata() {
  var innerTemphtml = ' ';
  for (var i = 0; i < customerarray.length; i++) {

    innerTemphtml += customerarray[i].customerName + " " + customerarray[i].customerID + " " + customerarray[i].AmountDue;
  }
  document.getElementById('output').innerHTML = innerTemphtml;
}
function displayTotalDue(){
 var total =0;
    customerarray.forEach(function(item){
   total = total + item.AmountDue
  });
  var innerTemphtml = 'totalDue=' + total;
  document.getElementById('output').innerHTML = innerTemphtml;
}
function addtoarray() {
  customerarray.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: parseInt(document.getElementById('Amount').value)
  });
  console.log(customerarray);
}

Answer 4

我尝试修复你的代码。使其更容易阅读。我将displaydata()方法放在addtoarray()方法中，因此您可以在customers数组中添加元素后查看结果。另外，我将for替换为forEach，并为总数添加了新的div。

我创建了一个p标记的节点，其中包含名称，ID和数量。然后，此标记将添加到数组中每个元素的outputLabel。您可以通过添加额外的node并且不运行整个数组来打印输出来优化它。

// Code goes here

var customers = [];
var outputLabel = document.getElementById('output');
var totalLabel = document.getElementById('total');
var total = 0;

outputLabel.innerHTML = '<p>Customers</p>';
totalLabel.innerHTML = 'Total:  0';
function displaydata() {
  outputLabel.innerHTML = '<p>Customers</p>';;
  total = 0;
  customers.forEach(function(customer) {
    var node = document.createElement('p');
    node.innerHTML = customer.customerName + ', ' +
      customer.customerID + ', ' +
      customer.AmountDue;
    total += parseInt(customer.AmountDue);
    outputLabel.appendChild(node);
  });
  totalLabel.innerHTML = 'Total: ' + total;
}

function addtoarray() {
  customers.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: document.getElementById('Amount').value
  });
  displaydata();
}

<span>Customer Name: </span>
<input type="text" id='custName' /><br><br>
<span>Customer ID: </span>
<input type="text" id='CustID' /><br><br>
<span>Amount: </span>
<input type="text" id='Amount' /> <br><br>
<button onClick="addtoarray();" class="button" type="button">Add to array</button>
<div id="output"></div>
<div id="total"></div>

优化版：对于此版本，我将node（p代码）移至addtoarray()方法，并从{{1}中捕获数据}}。然后我计算总数。使用这两个值调用inputs。每次要打印添加的元素时，此方法都可以节省运行数组的时间。

displaydata()

// Code goes here

var customers = [];
var outputLabel = document.getElementById('output');
var totalLabel = document.getElementById('total');
var total = 0;

outputLabel.innerHTML = '<p>Customers</p>';
totalLabel.innerHTML = 'Total:  0';

function displaydata(node, total) {
  outputLabel.appendChild(node);
  totalLabel.innerHTML = 'Total: ' + total;
}

function addtoarray() {
  var customerName = document.getElementById('custName').value;
  var customerID = document.getElementById('CustID').value;
  var amountDue = document.getElementById('Amount').value;
  customers.push({
    customerName: customerName,
    customerID: customerID,
    amountDue: amountDue
  });
  var node = document.createElement('p');
  node.innerHTML = customerName + ', ' + customerID + ', ' + amountDue;
  total += parseInt(amountDue);
  displaydata(node, total);
}

在数组中简单添加

4 个答案: