Javascript Changing Inputbox colors

[Imperceptus]

I am trying to color the background color of input fields on a page using javascript

Code Select Expand


        function notifyDuplicates() {
            var el = document.getElementsByTagName('input');
            for (counter1 = 0; counter1 < el.length; counter1++) {
                var firstEl = el[counter1];
                if ((firstEl.type == 'text') && (firstEl.id.endsWith('TextBox1'))) {                   
                    for (counter2 = 0; counter2 < el.length; counter2++) {
                        var secondEl = el[counter2];
                        firstEl.style.background = ((firstEl.value == secondEl.value) && (counter1!=counter2))?'#FF8684':'#FFFFFF';
                        secondEl.style.background = ((firstEl.value == secondEl.value) && (counter2!=counter1))?'#FF8684':'#FFFFFF';
                    }
                }
            }
        }

If my page looks like

Code Select Expand


Column1             Column2             
Value1                Value2
Value1                Value3

The background for the element of Value1 ends up being colored red, but the the other Value1 Element does not.  Thoughts?

[rabbit]

Give an ID to everything and use GetElementByID

[MyndFyre]

Or use jQuery, the bestest javascript thingamajig EVER.

Code Select Expand


$('input[type=text]').css('background-color', 'red');

This is a sample of turning all input text boxes to a background-color of red.

If you need more specificity, I suggest setting IDs:

Code Select Expand


if ($('#elem1').val() != $('#elem2').val())
    $('#elem1').css('background-color', 'red);


Or you could always use this awesome jquery validation plugin.

Moral of the story: jQuery is the shit.

[Imperceptus]

Did some work on it and found that It was actually coloring the boxes correctly, but I had failed logic and the loop would uncolor. Will look into the jquery.  I have tried changing my ID's and going through just them but, .net seems to do some obfuscating on that part and even though I try to put <%=inputobject.clientid%> the compiler seems to hate it and blows up every time.  

Thanks for the suggestions, I looked into jQuery and it does look like the way of things for the future, but atm I dont know enough about it to feel comfortable plugging something.  I fixed my logic I think. I added a check to make sure the boxes weren't already flagged(red).

Code Select Expand


        function notifyDuplicates() {
            var el = document.getElementsByTagName('input');
            for (counter1 = 0; counter1 < el.length; counter1++) {
                var firstEl = el[counter1];
                if ((firstEl.type == 'text') && (firstEl.id.endsWith('TextBox1')==true)) {                   
                    for (counter2 = 0; counter2 < el.length; counter2++) {
                        var secondEl = el[counter2];
                        if ((firstEl.value == secondEl.value) &&
                             ((firstEl.style.background != '#FF8684') || (secondEl.style.background != '#FF8684')) &&
                             (counter1!=counter2)) {
                            firstEl.style.background = '#FF8684';
                            secondEl.style.background = '#FF8684';
                            break;
                        } else {
                            firstEl.style.background = '#FFFFFF';
                            secondEl.style.background = '#FFFFFF';                       
                        }
                    }
                }
            }
        }


[Grok]

Or use jQuery, the bestest javascript thingamajig EVER.

Agree.  Might also check out the Manning publishers book "jQuery in Action".

[rabbit]

Since my last post, I have in fact started using jQuery, and the description on the page Grok posted is right: I fell in love.

Anyway, I just noticed that you're checking with type AND id fields, which means either A) you're overdoing it or B) not using id properly.  Remember that id is supposed to be unique to each element.

[Camel]

Yes, you're not allowed to reuse ids. I don't think any browsers will expressly forbid you from doing it, but it's a violation of some standard.

[rabbit]

If you try to use GetElementById when you've reused ids, you'll get migraines.

[Imperceptus]

Since my last post, I have in fact started using jQuery, and the description on the page Grok posted is right: I fell in love.

Anyway, I just noticed that you're checking with type AND id fields, which means either A) you're overdoing it or B) not using id properly.  Remember that id is supposed to be unique to each element.

Most of my dev code contains alot of sanity checks. So overdoing yes.  Yeah my id's are unique. 

[rabbit]

Sometimes you can approach insane from a different direction.  If your IDs are unique, you don't need to check the type.

[Imperceptus]

oh, yeah that does make some sense.

[Grok]

Sometimes you can approach insane from a different direction.

If you were a famous person, this would get printed and catch on.

[rabbit]

Sometimes you can approach insane from a different direction.

If you were a famous person, this would get printed and catch on.

Well that's cool...I stole it from Terry Pratchett