Javascript: Loop through array while adding CSS styling

Question

I have a for loop.

In the loop there is an if statement that adds an error css style if the dropdown is found empty.

My problem is that the loop only loops 3 times then stops when it is supposed to loop 15 times.....and i do not know why.

The loop alone works fine, but but when i add the if statement, that's when it becomes weird.

Help.

here is my loop

//add all the id's in an array. array size is 15
var drop_down=["Cars_chassis","Cars_model".....];

for (var i = 0; i < drop_down.length; i++) {
    //check if dropdown is empty
    if(document.getElementById(drop_down[i]).value == ""){

        //change the color of border 
        $('#'+drop_down[i]).css('border-color' , '#dddcdc');
     }
}

Can you create a jsfiddle with your example? The loop doesn't seem to have anything odd in it that would cause it to break. — DanC
– DanC, Commented Mar 10, 2013 at 17:11

Kevin Bowersox · Accepted Answer · 2013-03-10 17:14:41Z

3

I would suggest adding a CSS class to each one of these elements instead of specifying their id. Why manage all of those ids when one class can do the trick?

<select id="Cars_chassis" class="bordered-select"></select>
<!-- Add class to other 15 -->

At this point you could statically define a style for these drop downs in CSS.

.bordered-select{
   border-color: #DDDCDC;
}

Or set the style on the elements using the class selector. It appears your using jQuery so the following example would work.

$(".bordered-select").css('border-color', '#DDDCDC');

If you only need to highlight those without a value the following would remove those without a value from the matched set of elements:

$(".bordered-select").filter(function(){
  return $(this).val() == "";
}).css("border-color", "#DDDCDC");

Working Example: http://jsfiddle.net/v4hQz/

edited Mar 10, 2013 at 17:14

answered Mar 10, 2013 at 17:09

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

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

Comments

Benjamin RD · Accepted Answer · 2013-03-10 17:13:22Z

0

var drop_down=["Cars_chassis","Cars_model".....];

for (var i = 0; i < drop_down.length; i++) {
    //check if dropdown is empty
    if( $('#' + drop_down[i]).value == ""){

        //change the color of border 
        $('#'+drop_down[i]).css('border-color' , '#dddcdc');
     }
}

OR you can try

var drop_down=["Cars_chassis","Cars_model".....];
var contents = $('#'  + drop_down[i]);
for (var i = 0; i < drop_down.length; i++) {
    //check if dropdown is empty

    if( $(contents[0]).value == ""){

        //change the color of border 
        $('#'+drop_down[i]).css('border-color' , '#dddcdc');
     }
}

answered Mar 10, 2013 at 17:13

Benjamin RD

12.1k16 gold badges96 silver badges166 bronze badges

Comments

Fabrício Matté · Accepted Answer · 2013-03-10 17:17:34Z

0

document.getElementById(drop_down[i]); //returns a HTML DOM Object

var contents = $('#' + drop_down[i]);  //returns a jQuery Object

You can try replace the if (javascript) to if (jquery syntax)

edited Mar 10, 2013 at 17:17

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

answered Mar 10, 2013 at 17:10

Benjamin RD

12.1k16 gold badges96 silver badges166 bronze badges

Collectives™ on Stack Overflow

Javascript: Loop through array while adding CSS styling

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related