How can I assign an index to each of these input fields

Question

Right so the question maybe doesn't illustrate what I'm trying to say but here's what I'm trying to achieve. I have got 6 text boxes on a page each of which contains a number between 0 and 500 (there is no limit but I'm not expecting the number to be higher than this). This number is dependent on a calculation elsewhere, but is irrelevant for this question so I've left it out. Anyway, what I'm trying to do is;

Run through a loop and assign a new text box scoreone, scoretwo etc in the code below an index between 1 and 10 based on the size of the values in indexone, indextwo etc.

So for example if indexone contains 15, the textbox scoreone will be populated with 0. Now this works fine, but only for one textbox, as I have six, I'm not sure how to do this for all of them (i.e. one after the other). I'm using JavaScript and jQuery...

HTML:

<input type="text" disabled="disabled" value="20" id="indexone" />
<input type="text" disabled="disabled" value="0" id="scoreone" /><br>


<input type="text" disabled="disabled" value="60" id="indextwo" />
<input type="text" disabled="disabled" value="0" id="scoretwo" /><br>


<input type="text" disabled="disabled" value="100" id="indexthree"/>
<input type="text" disabled="disabled" value="0" id="scorethree" /><br>


<input type="text" disabled="disabled" value="160" id="indexfour"/>
<input type="text" disabled="disabled" value="0" id="scorefoure" /><br>

<input type="text" disabled="disabled" value="180" id="indexfive"/>
<input type="text" disabled="disabled" value="0" id="scorefive" /><br>


<input type="text" disabled="disabled" value="210" id="indexsix"/>
<input type="text" disabled="disabled" value="0" id="scoresix" /><br>

JS:

var indexArray = [indexone, indextwo, indexthree, indexfour, indexfive, indexsix];

for (var i = 0; i < indexArray.length; i++) {
    if ((indexArray[i] >= 0) && (indexArray[i] < 25)) {
        scoreone = parseInt(1);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 25) && (indexArray[i] < 50)) {
        scoreone = parseInt(2);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 50) && (indexArray[i] < 75)) {
        scoreone = parseInt(3);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 75) && (indexArray[i] < 100)) {
        scoreone = parseInt(4);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 100) && (indexArray[i] < 125)) {
        scoreone = parseInt(5);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 125) && (indexArray[i] < 150)) {
        scoreone = parseInt(6);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 150) && (indexArray[i] < 175)) {
        scoreone = parseInt(7);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 175) && (indexArray[i] < 200)) {
        scoreone = parseInt(8);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 200) && (indexArray[i] <= 225)) {
        scoreone = parseInt(9);
        $('#scoreone').val(scoreone);
    }
    else if (indexArray[i] > 225) {
        scoreone = parseInt(10);
        $('#scoreone').val(scoreone);
    }

}

I've put what I'm trying to do in a fiddle here too...

Why not change what the id's are. So instead of scoreone use score1 and make the name by appending score + i where i is the loop iterator — Mark Meyer
– Mark Meyer, Commented Oct 10, 2012 at 14:35
@MarcB you're right, that's just redundant! I will remove... — zik
– zik, Commented Oct 10, 2012 at 14:41
Do you realize the >= checks in all of the ifs are redundant. Of course it is greater or it would have not gotten past the previous steps. — epascarello
– epascarello, Commented Oct 10, 2012 at 14:46

Mateusz Rogulski · Accepted Answer · 2012-10-10 14:47:43Z

1

Try this working example witch changed words for ints:

jsfiddle

answered Oct 10, 2012 at 14:47

Mateusz Rogulski

7,4638 gold badges47 silver badges63 bronze badges

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

1 Comment

zik Over a year ago

Excellent. This worked with a bit of tweaking (I didn't need to bind it to an onClick. Thanks so much.

epascarello · Accepted Answer · 2012-10-10 15:02:28Z

1

Just use classes and loop through

HTML

<input type="text" disabled="disabled" value="20" class="index" />
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="60" class="index" />
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="100" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="160" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>

<input type="text" disabled="disabled" value="180" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="210" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>

JavaScript

//That whole if/else if statement reduced to a calculation
function getValue(val){
    var number = (Math.round(val/100*4)/4)*100/25;
    if (number>10) {
        number = 10;
    }        
    return number;
}

//Find all of the indexes and scores, returned in document order
var indexes = $(".index");
var scores = $(".score");

//loop through indexes and set the value on the corresponding score
indexes.each(function(ind) {
    var index = jQuery(this);
    var score = scores.eq(ind);
    var value = getValue(index.val());
    score.val(value);
});

Running example

edited Oct 10, 2012 at 15:02

answered Oct 10, 2012 at 14:40

epascarello

208k20 gold badges206 silver badges246 bronze badges

7 Comments

Marc B Over a year ago

and jquery will magically know what the OP wants to modify only the .score elements that follow immediately after the .index being considered... how?

zik Over a year ago

Thanks but the problem is, the values for indexone, indextwo etc are always different as they are dependent on other calculations...

epascarello Over a year ago

@MarcB the elements are returned in document order so as long as the result is in the same order as the index, there is no problem.

epascarello Over a year ago

@Kiz, your comment gives me no more information to go off on.

zik Over a year ago

@epascarello, sorry what I was trying to say was the values that I'm using to calculate the indexes for, so for example indexone, indextwo etc are actually calculated fields (i.e. the values in these boxes can change). Hope this makes sense

|

Milton Filho · Accepted Answer · 2012-10-10 14:38:32Z

0

try this http://jsfiddle.net/wthFv/5/

answered Oct 10, 2012 at 14:38

Milton Filho

5253 silver badges17 bronze badges

Comments

Yogendra Singh · Accepted Answer · 2012-10-10 14:59:06Z

0

Hope this simplifies:

Update the Ids for the fields to use index number as suffix as score1, score2.. and index1, index2...

Then write a compact java function as below:

 for (var i = 1; i <= 6; i++) {
    $('#score'+i).val(Math.ceil($('#index'+i).val()/25));
  }

If you don't want to change the ids then, I think below should work.

var indexArray = [indexone, indextwo, indexthree, indexfour, indexfive, indexsix];
var scoreArray = [scoreone, scoretwo, scorethree, scorefour, scorefive, scoresix];

 for (var i = 0; i < indexArray.length; i++) {
    $('#'+scoreArray[i]).val(Math.ceil($('#'+indexArray[i]).val()/25));
  }

edited Oct 10, 2012 at 14:59

answered Oct 10, 2012 at 14:46

Yogendra Singh

34.5k7 gold badges66 silver badges73 bronze badges

Collectives™ on Stack Overflow

How can I assign an index to each of these input fields

4 Answers 4

1 Comment

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related