Javascript For循环将不会递增

我试图使用for循环将用户输入的值推送到数组中。但是，由于某些原因，循环不会递增以将下一个值推入数组，而是覆盖第一个位置。这是用于获取以下用户输入的HTML

<div class="total-budget-fields">
<h3>Enter Budget</h3>
<input type="number" placeholder="$1000" id="budget">
<input type="button" onclick="addNum();"  class="btn hit" id="budget" value="Calculate">
</div>

---

我尝试使用while循环作为替代，但没有成功。欢迎您的任何帮助，提前谢谢

如评论中所述，循环没有意义，您不需要像

i

这样的索引变量。相反，将数组设置为全局数组，只需推送新值即可。这将自动增加阵列的大小。如果

budgetArray

在您的函数范围内，则每次调用此函数时都会创建它

var budgetArray = [];
addNum = ()=>{
    var budget = document.getElementById('budget').value;
    if (budget.trim() == '') {
        alert("Field is Empty!");
    } else if (!(isNaN(budget))) {
        budgetArray.push(budget);
    }
}

---

另外，在标记文件中，两个元素具有相同的id

budget

。您应该解决这个问题，并使您的

id

在整个文档中是唯一的。它目前起作用是因为如果有多个元素具有相同的id，

getElementById

将只提供第一个元素。

如注释中所述，循环没有意义，您不需要像

i

这样的索引变量。相反，将数组设置为全局数组，只需推送新值即可。这将自动增加阵列的大小。如果

budgetArray

在您的函数范围内，则每次调用此函数时都会创建它

var budgetArray = [];
addNum = ()=>{
    var budget = document.getElementById('budget').value;
    if (budget.trim() == '') {
        alert("Field is Empty!");
    } else if (!(isNaN(budget))) {
        budgetArray.push(budget);
    }
}

---

另外，在标记文件中，两个元素具有相同的id

budget

。您应该解决这个问题，并使您的

id

在整个文档中是唯一的。它目前起作用的原因是，如果有多个元素具有相同的id，

getElementById

将只提供第一个元素。

第一个问题是，每次单击都会将

budgetArray

重新指定为空数组。这就是为什么数组中始终只有一项

您必须将数组缓存在

addSum

函数之外。由于预算容器在此期间不会更改，因此最好也将其缓存

此外，您根本不需要为此任务执行循环。所以像这样的东西就行了

var budgetArray = [];
var budgetContainer = document.getElementById('budget');

addNum = () => {
   const budget = budgetContainer.value.trim();

   if (budget == '') {
      alert("Field is Empty!");
   } else if (!(isNaN(budget))) {
      budgetArray.push(budget);
   }
}
console.log(budgetArray);
console.log(i);

---

第一个问题是，每次单击都会将

budgetArray

重新指定为空数组。这就是为什么数组中始终只有一项

您必须将数组缓存在

addSum

函数之外。由于预算容器在此期间不会更改，因此最好也将其缓存

此外，您根本不需要为此任务执行循环。所以像这样的东西就行了

var budgetArray = [];
var budgetContainer = document.getElementById('budget');

addNum = () => {
   const budget = budgetContainer.value.trim();

   if (budget == '') {
      alert("Field is Empty!");
   } else if (!(isNaN(budget))) {
      budgetArray.push(budget);
   }
}
console.log(budgetArray);
console.log(i);

---

你到底想做什么？

budgetArray

应该是全局的吗？循环的目的是什么？似乎没有必要。一个不必要的重要指标是您没有对循环变量做任何操作。每次调用函数时，都会创建一个新数组。如果你想在多个函数调用中使用相同的数组，那么在函数外部声明数组。哦，它在函数中。。。因此循环是无用的，数组应该是全局的（或在全局对象中），正如@KenY-N所说的。每次用户单击提交一个新值（=>no loop）@Sam时，都会调用该函数，该值与此代码没有任何区别。您实际上想做什么？

budgetArray

应该是全局的吗？循环的目的是什么？似乎没有必要。一个不必要的重要指标是您没有对循环变量做任何操作。每次调用函数时，都会创建一个新数组。如果你想在多个函数调用中使用相同的数组，那么在函数外部声明数组。哦，它在函数中。。。因此循环是无用的，数组应该是全局的（或在全局对象中），正如@KenY-N所说的。每次用户单击提交一个新值（=>no loop）@Sam时都会调用该函数，该值在代码中没有任何差别。我想trim（）也应该应用于存储的值，因此可能

const budget=budgetContainer.value.trim（）

更好（并删除下面的trim（）），在这种情况下它是有意义的。我想trim（）也应该应用于存储的值，因此在这种情况下，可能

const budget=budgetContainer.value.trim（）更好（并删除下面的trim（））。