Question

我已经将输入值推送到一个空数组，并将其转换为数字。我试图加起来的数组，并显示总和。但是显示了整个数组，没有进行任何添加。我在这里包括了一些代码，但是如果我忘记了一些重要的东西，我还将包括JS小提琴。一段时间以来，我可能考虑得太多了。 JS小提琴： https://jsfiddle.net/nzart/emruz0sb/4/

// HTML
<h1>Sugar Counter:</h1><p id="total">--</p>

<div class="box bot1">
 <div class="twogrid mid">
  <label for="amount">Amount of Sugar</label>
  <input type="text" name="amount" id="amount">
 </div>    
</div>

//JS
var added = [];

//Get Data
var userInput = function(){
    return parseFloat(document.getElementById('amount').value);
}

// Store Data
var newSugar = function(){
    return added.push(userInput());
}

//Add total
function total() {
    var sum = 0;    
    for (var i = 0; i < added.length; i++) {
        sum += added[i];
    }
    document.getElementById('total').textContent = added;
}

Answer 1

此行在total（）函数内部不正确：

 document.getElementById('total').textContent = added;

更改为此：

document.getElementById('total').textContent = sum;

这是更新的小提琴：https://jsfiddle.net/bqt1mws7/

Answer 2

您正在显示数组变量，而不是 sum变量。将 sum 变量分配给#total，而不是添加变量。

document.getElementById（'total'）。textContent = sum;

Answer 3

添加过程没有问题。如果数组有效，则total()函数将正常运行。但是在total()函数的最后一条语句中，您将added变量作为输出。但是它应该是sum变量的值。

function total() {
    var sum = 0;    
    for (var i = 0; i < added.length; i++) {
        sum += added[i];
    }
    document.getElementById('total').textContent = sum;
}

Answer 4

您需要一个按钮来执行求和以更新总数。

Array.prototype.reduce函数是在列表中求和的简单方法。

values.reduce((runningTotal, currentValue) => runningTotal + currentValue, initialValue)

var valueList = [];

document.getElementById('btn-add').addEventListener('click', onAddClick);

function onAddClick(e) {
  var value = getCurrentValue();
  if (isNaN(value)) {
    alert('Value is not a number!');
    return;
  }
  valueList.push(value);
  document.getElementById('total').textContent = getTotal();
}

function getCurrentValue() {
  return parseFloat(document.getElementById('amount').value.trim());
}

function getTotal() {
  return valueList.reduce((a, b) => a + b, 0); // Sum the values in the list
}

<h1>Sugar Counter:</h1>
<label>Total:</label>
<span id="total">--</span>
<div class="box bot1">
  <div class="twogrid mid">
    <label for="amount">Amount of Sugar</label>
    <input type="text" name="amount" id="amount">
    <input type="button" value="Add" id="btn-add" />
  </div>
</div>

将带有推入的输入值的数组和相加

4 个答案: