Javascript For Loop will not increment

Question

I am trying to use a for loop to push values entered by a user into an array. But, for some reason, the loop will not increment to push the next value into the array but will instead overwrite the first location. This is the HTML used to get the user's input below.

<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>

And this here is the javascript function linked to the button below.

addNum = () => {
    // console.log('addNum');
    var budgetArray = [];
    var budget = document.getElementById('budget').value;

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

I tried using a while loop as an alternative which didn't work. Any and all help is welcomed, thank you in advanced!

What are you actually trying to do? Should budgetArray be global? — Ken Y-N
– Ken Y-N, Commented Sep 2, 2020 at 5:46
What’s the purpose of the loop? Seems unnecessary. A big indicator that it is unnecessary is that you are not doing anything with the loop variable. You are creating a new array every time the function is called. If you want to use the same array across multiple function calls then declare the array outside of the function. — Felix Kling
– Felix Kling, Commented Sep 2, 2020 at 5:46
Oh it's in a function... so the loop is useless, and the array should be global (or in a global object) as @KenY-N said. The function will be called each time the user click to submit a new value (=> no loop) — Déjà vu
– Déjà vu, Commented Sep 2, 2020 at 5:47

kai · Accepted Answer · 2020-09-02 05:47:55Z

1

Like already mentioned in the comments, the loop makes non sense and you dont need an index variable like i. Instead make the array global and just push new values. This will increase the size of the array automatically. If budgetArray is in the scope of your function, it is created on every call of this function.

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

Also in your markup file two elements has the same id budget. You should fix that and make your id's unique across your whole document. It currently works because if there is more than one element with the same id, getElementById will just give you the first one.

answered Sep 2, 2020 at 5:47

kai

6,92725 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rado · Accepted Answer · 2020-09-02 05:56:41Z

1

The first problem is that on every click you are reassigning you budgetArray to be an empty array. This is why you will always have only one item in the array.

You have to cache your array outside the addSum function. As your budget container will not change during the time, it is a good idea to cache it as well.

Also, you do not need for loop for this task at all. So something like this will do the job.

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);

edited Sep 2, 2020 at 5:56

answered Sep 2, 2020 at 5:49

Rado

7491 gold badge10 silver badges22 bronze badges

2 Comments

Déjà vu Over a year ago

I guess the trim() should apply to the stored value as well, thus maybe const budget = budgetContainer.value.trim() is better (and remove the trim() under)

Rado Over a year ago

It makes sense in this case.

Collectives™ on Stack Overflow

Javascript For Loop will not increment

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related