Question

我正在尝试编写一个非常简单的javascript应用，用户可以输入5个数字，并且这5个数字的总和会自动输出到屏幕上。我对javascript很陌生，所以我不确定我哪里出错了。按下按钮后，以下代码将打印NaN一秒钟。关于我如何更好地处理此输入的任何想法吗？

var total = {
  transport: document.querySelector('#transport').value,
  cofee: document.querySelector('#cofee').value,
  cloth: document.querySelector('#cloth').value,
  food: document.querySelector('#food').value,
  snack: document.querySelector('#snack').value,
}

function sum( obj ) {
  var sum = 0;
  for( var el in obj ) {
    if( obj.hasOwnProperty( el ) ) {
      sum += parseFloat( obj[el] );
    }
  }
  return sum;
}

var button = document.querySelector('#btn');
var mydiv = document.querySelector('.display');
var text = document.createElement('P')
text.innerHTML = 'You spent today: ' + sum(total)
mydiv.appendChild(text)

button.addEventListener('click', function(evt){
    evt.preventDefault(evt)
    mydiv.style.display = "block";
});

Answer 1

以这种方式更改sum函数，因为单击按钮时需要获取元素的当前值。

const total = {
    transport: document.querySelector('#transport'),
    cofee: document.querySelector('#cofee'),
    cloth: document.querySelector('#cloth'),
    food: document.querySelector('#food'),
    snack: document.querySelector('#snack')
  };

function sum() {
  return Object.values(total).reduce((sum,val) => sum + (val.value ? parseFloat(val.value) : 0), 0);
}

var button = document.querySelector('#btn');
var mydiv = document.querySelector('.display');
var text = document.createElement('P');
mydiv.appendChild(text)
mydiv.style.display = "block";

button.addEventListener('click', function(evt){
    evt.preventDefault(evt);
    text.innerHTML = 'You spent today: ' + sum();
});

输出NaN而不是总和（总计）

1 个答案: