javascript loop getElementById

Question

I have a page containing a lots of text boxes with an incremental id. I'd like to read all these IDs and display them using javascript.

HTML page that looks like:

<input type="text" id="item1" value="111" ></input>
<input type="text" id="item2" value="222" ></input>
<input type="text" id="item3" value="333" ></input>

and a javascript part:

for (var i=1; i<3; i++){
    var values = parseInt(document.getElementById('item' + i).value);
    document.write(values);
}

I can't figure out why but only the first ID is displayed then firefox return an error (in the debugging console sysing: TypeError: document.getElementById(...) is null

Thanks for your help !

Romain

When "the first ID is displayed", what does the page look like? Is it a white screen with just "111" in the upper left corner? — Pointy
– Pointy, Commented Dec 15, 2013 at 20:26
@romain the likely problem is that document.write() obliterates the entire page when it's called after the page has completed. — Pointy
– Pointy, Commented Dec 15, 2013 at 20:27
When document.write() is used on a document that is already loaded, it clears the current document and starts a new blank one, thus wiping out your current DOM. Chance are you don't want to use document.write() here at all. — jfriend00
– jfriend00, Commented Dec 15, 2013 at 20:57

Mike Vranckx · Accepted Answer · 2013-12-15 20:37:03Z

5

document.write is causing the problem, remove it outside the loop and it should work. Also, your for loop definition only loops for 2 elements, not the 3th one ...

var values = [], i = 0;
for (; i < 4; i += 1) {
    values.push(parseInt(document.getElementById('item' + i).value, 10));
}

document.write(values.join(', '));

edited Dec 15, 2013 at 20:37

answered Dec 15, 2013 at 20:30

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

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

1 Comment

Milche Patern Over a year ago

wouldn't it be : var values = [], i; for (i=0; i < 4; ?

Collectives™ on Stack Overflow

javascript loop getElementById

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related