updating values of an array through <input> tags

Question

I have the following three tag:

<input class="forLoopIndex" id="typicalElement" type="text" name="k" size="1" placeholder="10">

<input class="forLoopIndex" type="text" name="n" size="1" placeholder="n">

<input class="forLoopIndex" type="text" name="i" size="1" placeholder="i">

Now I have an event listener that checks when a value comes in, and then stores it in an array. I want the array to be kept at 3 values only. Cause I need to use the third and the second for something, but I need to see when they change. Here is the JS for that:

  forloops.keyup(function () {
    if (forLoopIndex.length < 2 && forLoopIndex >= 0) {
        forloops.each(function () {
            forLoopIndex.push($(this).val());
            appendingToSigmaLimit();
            console.log(sigmaLimit.val());
            console.log(forLoopIndex);
        });
    } else if (forLoopIndex.length > 2) {
        forLoopIndex = [];
    }
});

Now, the problem is that, the values will only update until I have changed the values of the three inputs again. I have a feeling that the way of the logic is in my JS is making it do that. I just need to update the values every time that I change a value on one of my inputs. Any ideas?

Thanks,

M

Answer 1

Not sure what you expected, something like this will update each input separatly

var forloops= $('.forLoopIndex');
var forLoopIndex = [];
forloops.keyup(function () {
    forloops.each(function (i, e) {
           forLoopIndex[i] = $(this).val();
           console.log(i);
           console.log(forLoopIndex);
    });
});

FIDDLE

Edit without loop:

var forloops= $('.forLoopIndex');
var forLoopIndex = [];
forloops.keyup(function () {
    forLoopIndex[$(this).index('.forLoopIndex')] = $(this).val();
    console.log(forLoopIndex);
});

FIDDLE