Dynamically retrieving elements with loop in javascript

Question

I am new to javascript and I want to get the elements by the name with help of loop but can not get the elements. Kindly help so that i can reduce the lot of code by using loop.

Below are the lines of code

function (e){
    for(var i=1;i<5;i++){
        var name = "qption0"+i;
        var clicableObject = document.getElementById(name);
        clicableObject.backgroundColor = "#00FF00";
    }
}

Above code is in JAVASCRIPT

You mention get element by name, yet you're using getElementById... If the IDs of your controls aren't qption01-04 then this approach won't work. — Jeff Watkins
– Jeff Watkins, Commented Dec 3, 2012 at 10:32
You say you want to get the elements by the name, but you're using getElementById — sp00m
– sp00m, Commented Dec 3, 2012 at 10:33

William Buttlicker · Accepted Answer · 2012-12-03 10:40:15Z

1

You can simply do this:-

var name = "qption0"+i;
var clicableObject = document.getElementsByName(name);
clicableObject.style.backgroundColor = "#00FF00"

Thats it.. Hope it helps...

edited Dec 3, 2012 at 10:40

answered Dec 3, 2012 at 10:33

William Buttlicker

6,0005 gold badges36 silver badges59 bronze badges

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

3 Comments

Kevin Bowersox Over a year ago

This is a comment, not an answer.

William Buttlicker Over a year ago

@kmb385 Ya...actually I am a newbiee at stackoverflow :p..But now i have turned it into an answer..:)

Kevin Bowersox Over a year ago

excellent work. I encourage you to keep visiting the community, its pretty easy to get the hang of the site.

Kevin Bowersox · Accepted Answer · 2012-12-03 10:32:31Z

0

When changing an elements background color via Javascript the syntax of the statement is elem.style.backgroundColor. The provided code omits the .style. portion of this call.

function (e){
    for(var i=1;i<5;i++){
        var name  = "qption0"+i;
        var clicableObject  = document.getElementById(name);        
        clicableObject.style.backgroundColor = "#00FF00"; //notice .style.back..
}

For further information check out this article on MDN.

answered Dec 3, 2012 at 10:32

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Echilon · Accepted Answer · 2012-12-03 10:53:39Z

0

You should use style object..

clicableObject.style.backgroundColor = "#00FF00";

edited Dec 3, 2012 at 10:53

Echilon

10.3k33 gold badges138 silver badges226 bronze badges

answered Dec 3, 2012 at 10:33

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Dynamically retrieving elements with loop in javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related