Блог

Я поместил входное значение в пустой массив и преобразовал его в число. Я пытаюсь сложить массив и показать сумму. Но показан весь массив, и добавление не было выполнено. Я включил сюда часть кода, но я также включу JS fiddle на случай, если я забыл что-то важное. Возможно, я слишком много думаю об этом, поскольку некоторое время смотрел на это. Скрипка 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;
}
  

Эта строка неверна внутри функции total():

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

Измените на это:

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

Вот обновленная скрипка: https://jsfiddle.net/bqt1mws7 /

Вы отображаете переменную массива, а не переменную суммы. Присвоите переменной sum значение #total, а не добавленной переменной.

document.getElementById(‘total’).textContent = сумма;

Вам нужна кнопка для выполнения суммирования, чтобы обновить итоговое значение.

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>  

В процессе добавления нет проблем. Если массив допустим, 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;
}