OnFocusOut coloring 1

[jshurst]

I have a bunch of input buttons on a page (dynamically created by a asp:gridview). They all have the same id (id=btnName). When the button recieves focus I turn the font color red, then when the focus is lost it turns it back to aqua.

This is ok, except I really want the font to stay red until another "btnName" is clicked (not just loosing focus to anything on the page). Can someone help me out with a function that would do that?

Thanks in advance.

J

 

[cLFlaVA]

are they really "button" tags? or are the input tags with type of button? or are they anchor tags?

you'll need to loop through the set of "buttons" and style each one one way, except for the "active" button.

something like this:

<style type="text/css">
.active {
    color: red;
}
</style>

<script type="text/javascript"><!--
function blah(theButton) {
    var elems = theButton.form.elements;
    for ( var i = 0; i < elems.length; i++ ) {
        if ( elems[i].type == 'button' ) {
            elems[i].className = (elems[i].id <> theButton.id) ? '' : 'active';
        }
    }
}
//--></script>

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[jshurst]

They are input tags with type=button. I can change it to an anchor if it will be easier.

Could you tell me how to pass the button to the function?

Also can I just use something like...
{document.getElementById('btnName').style.color = 'aqua';}
in the loop, or do I need to create an "active" class?

 

[cLFlaVA]

you call the function like this:

<input type="button" name="b1" id="b1" onclick="blah(this);" />

yes, you can use inline styles. change that line in the function to something like this:

elems[i].style.color = (elems[i].id <> theButton.id) ? 'black' : 'red';

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[jshurst]

Awesome man. My first JavaScript loop. Thanks for your help. Here is what I did.

function ColorText()
        {
            var elems = document.form1.elements;
            for ( var i = 0; i < elems.length; i++ ) 
            {
               if ( elems[i].id == 'btnName' ) 
                   {
                       elems[i].style.color = 'aqua';
                   }   
            }
         }

Then my button:

One more question.  How do I get the "element" if it is a link (anchor)?  I don't see it listed in the elements list when I loop through all of the elements.

Thanks,

J

 

[cLFlaVA]

links are not form elements, per se. i would do it in this manner:

1) give your links a surrounding parent element.
2) include the "return false" in the onclick (otherwise, when clicked, the browser will try to browse away from the page and inconsistent results occur.
3) change your function to find links in the parent element.

<div id="myParent">
  <a ...>blah</a>
  <a ...>blah</a>
  <a ... id="myLink" onclick="blah(this); return false;">blah</a>
  <a ...>blah</a>
  <a ...>blah</a>
</div>

var elems = document.getElementById("myParent").getElementsByTagName("a");

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[jshurst]

Dude, you are the man. Worked perfectly! Thanks a ton.

J

 

[cLFlaVA]

no prob.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]