CODEWITHSUNDEEP
javascripthtmlarraysfor-loop
kkirpalani90
kkirpalani90

Reputation: 1

Javascript For Loop will not increment

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!

Upvotes: 0

Views: 215

Answers (2)

Rado
Rado

Reputation: 739

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

Upvotes: 1

kai
kai

Reputation: 6887

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.

Upvotes: 1

Related Questions