Question

如何将价值相互叠加？因此，如果您点击一个按钮，它会相互添加数字并继续堆叠。我试图将值添加到P标记的innerHTML中来计算总数，但我只是想出了如何在不添加其他值的情况下显示其真实值。

＆＃13;

someValue?++x,++y:(--x, --y);

＆＃13;

const input = document.querySelector('input')
const button = document.querySelector('button')
const p = document.querySelector('p')

function addCal() {
  const inputVal = input.value

  p.innerHTML = inputVal
}

button.addEventListener('click', addCal)

＆＃13;

Answer 1

您只需跟踪某处的最后一个值并将其添加到最新的数字。

请记住，从HTML获取的所有值都是字符串，因此必须先将它们（隐式或显式）转换为数字才能完成数学运算。此外，forChild用于获取/设置包含HTML的字符串。如果您不这样做，请使用.innerHTML。

另请注意，在操作之前，应始终验证用户输入是否符合您的要求。如果用户没有输入任何内容，但仍然点击按钮怎么办？如果输入非数字数据怎么办？

.textContent

const input = document.querySelector('input');
const button = document.querySelector('button');
const p = document.querySelector('p');

var total = null;  // The running total will be kept here

function addCal() {
  const inputVal = input.value;
  
  // .parseInt() and .parseFloat() are two ways of
  // explicitly converting strings that contain number
  // characters to numbers. With .parseInt() the secon
  // argument is the radix, which specifies what numeral
  // system to use (base 10 here).
  total = total + parseInt(inputVal, 10);
  p.textContent = total;
}

button.addEventListener('click', addCal)

Answer 2

最简单的方法之一是使用reduce对所有输入值求和。

1）使用querySelectorAll获取所有输入。

2）然后用reduce迭代输入元素，将每个输入值加到总和中。我们使用+input.value将值的字符串类型强制转换为数字。

＆＃13;

const inputs = document.querySelectorAll('input');
const button = document.querySelector('button');
const para = document.querySelector('p');

function addCal() {
  para.textContent = [...inputs].reduce((sum, input) => {
    return sum += +input.value;
  }, 0);
}

button.addEventListener('click', addCal, false);

＆＃13;

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<button>Add Calories</button>
<p>0</p>

＆＃13;

Answer 3

只需将p标签值转换为int然后再加起来。像

function addCal() {
   const inputVal = input.value  
   p.innerHTML = ( parseInt(p.innerHTML) + parseInt(inputVal) )  
}

相互增加价值

3 个答案: