Question

我试图通过获取值然后将它们推入数组来捕获表单中的用户输入。然后我想用警报输出它们，但由于某种原因，这些值被连接而不是添加。我的输出也随机零。我应该得到三个值的总和（例子1 + 2 + 3应该给6，而不是0123.请建议谢谢！

function myFunction() {
    var totalArray = [];
    
    totalArray.push(document.getElementById('votes1').value);
    totalArray.push(document.getElementById('votes2').value);
    totalArray.push(document.getElementById('votes3').value);
    
    var totalAmount = 0;
    
    for (var x = 0; x < totalArray.length; x++) {
    
        totalAmount += totalArray[x];
    }
    
    alert(totalAmount); 
}

myFunction();

<input id="votes1" value="1"/>
<input id="votes2" value="2"/>
<input id="votes3" value="3"/>

Answer 1

你可以使用parseInt在添加值之前将值转换为整数，如下所示：

totalAmount += parseInt(totalArray[x]);

Answer 2

value属性.value返回一个字符串值，因此如果要执行任何计算，则应将此值解析为数字：

totalAmount += Number(totalArray[x]);

否则+会将值连接为字符串。

希望这有帮助。

function myFunction() {
  var totalArray = [];

  totalArray.push(document.getElementById('votes1').value);
  totalArray.push(document.getElementById('votes2').value);
  totalArray.push(document.getElementById('votes3').value);

  var totalAmount = 0;

  for (var x = 0; x < totalArray.length; x++) {

      totalAmount += Number(totalArray[x]);
  }

  alert(totalAmount); 
}

myFunction();

<input id="votes1" value="1"/>
<input id="votes2" value="2"/>
<input id="votes3" value="3"/>

Answer 3

将您的代码简化为“小”位。

＆＃13;

const count = () => {
  let totalAmount = 0,
      numberOfInputs = 3;
      
  for (let i = 1; i <= numberOfInputs; i++) {
    totalAmount += Number(document.getElementById(`votes${i}`).value);
  }
  
  console.log(totalAmount); // return
}

document.getElementById('btn').addEventListener('click', count);

＆＃13;

<input id='votes1'>
<input id='votes2'>
<input id='votes3'>
<button id='btn'>Count</button>

＆＃13;

尝试捕获表单中的用户输入并将其添加到数组中并显示输出

3 个答案: