Use a variable in this javascript for loop

Question

I want the for loop to print out all the textboxes values, it doesn't work this way thought, how can I do it?

<script>
    current = x;

    for (var i = 0; i < current; i++) {    
        var num = document.calculator.textbox + i + .value;    
        document.write("<br>" + num);    
    }
</script>
<form name="calculator">
    <input type="text" name="textbox1">
    <input type="text" name="textbox2">
    <input type="text" name="textbox3">
    <input type="text" name="textbox4">
    <input type="text" name="textbox5">
    <!--...... infinite amount of textboxes-->
</form>

It would just be `read_prop(document.calculator, "textbox"+ 1);` Little extreme, but it would work. Nice explaination of [dot and bracket](http://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets) — epascarello, Jun 09 '13 at 14:13

score 5 · Answer 1 · answered Jun 09 '13 at 13:42

5

Try to get them using brackets:

var num = document.calculator[ 'textbox' + i ].value;

So generally you can access object by two ways:

Via dots: myObj.myProp
Via brackets: myObj[ 'myProp' ]

Both ways are equal, but in second you can use variables + string concatenations, etc.

answered Jun 09 '13 at 13:42

antyrat

27,479
9
75
76

2

Hm, not sure why this was downvoted - it's the correct way to do it. You should add a quick explanation that you can use the `[]` array syntax to reference object keys – Bojangles Jun 09 '13 at 13:44
Weird, it doesn't work if i is set to 0.. – user2468350 Jun 09 '13 at 14:06
because you have no input with an id of zero in your example code... – epascarello Jun 09 '13 at 14:10
@user2468350 I've just showed to you how you can access objects via brackets. The rest you should write by yourself. – antyrat Jun 09 '13 at 14:28

score 0 · Answer 2 · answered Jun 09 '13 at 13:54

This is how I would do it. I used classes instead of ids. This way it's much easier to add more inputs as you won't have to worry about incrementing the ids and changing the x var.

http://jsfiddle.net/NXPKh/2/

var tbs = document.calculator.getElementsByClassName('textbox');

for (var i = 0; i < tbs.length; i++) {
    var body = document.getElementsByTagName('body') [0];
    var br = document.createElement("br");
    var text = document.createTextNode(tbs[i].value);
    body.appendChild(br);
    body.appendChild(text);
}

Use a variable in this javascript for loop

2 Answers2