Using JS to change color of the contents of a span tag

Discussion in 'Javascript' started by Rob, Nov 13, 2004.

  1. Rob

    Rob Guest

    Hi all,
    Javascript is not my strong point but I have a little problem with a
    function.

    I have ASP code that displays form variables for x number of users.
    Depending on the radio button they click, I highlite some text in red
    over another form variable to show that it's mandatory. I use a <span>
    tag for the text and a Javascript function to change the text color of
    that user's mandatory field.

    My Javascript call passes (i) to show which user I'm talking about but
    the problem is I don't know how to change that user's text color.
    Here's my function
    <script language="JavaScript">
    <!--
    function ChangeTextColor(num){
    membertype_1.style.color='red';
    memberno_1.style.color='black';
    lastname_1.style.color='black';
    }

    //-->
    </script>
    As you see, I'm not using the parameter "num" so it only works for the
    first user. I need to know how to make it dynamic...I've tried

    membertype_[+num+].style.color='red';

    but that doesn't work.
    Anyone know the syntax?

    Thanks
    Rob


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Rob, Nov 13, 2004
    #1
    1. Advertising

  2. Rob

    McKirahan Guest

    "Rob" <> wrote in message
    news:4196692f$0$14507$...
    >
    > Hi all,
    > Javascript is not my strong point but I have a little problem with a
    > function.
    >
    > I have ASP code that displays form variables for x number of users.
    > Depending on the radio button they click, I highlite some text in red
    > over another form variable to show that it's mandatory. I use a <span>
    > tag for the text and a Javascript function to change the text color of
    > that user's mandatory field.
    >
    > My Javascript call passes (i) to show which user I'm talking about but
    > the problem is I don't know how to change that user's text color.
    > Here's my function
    > <script language="JavaScript">
    > <!--
    > function ChangeTextColor(num){
    > membertype_1.style.color='red';
    > memberno_1.style.color='black';
    > lastname_1.style.color='black';
    > }
    >
    > //-->
    > </script>
    > As you see, I'm not using the parameter "num" so it only works for the
    > first user. I need to know how to make it dynamic...I've tried
    >
    > membertype_[+num+].style.color='red';
    >
    > but that doesn't work.
    > Anyone know the syntax?
    >
    > Thanks
    > Rob


    Try the following:

    <script type="text/javascript">
    function ChangeTextColor(num) {
    document.getElementById("membertype_"+num).style.color='red';
    document.getElementById("memberno_"+num)style.color='black';
    document.getElementById("lastname_"+num).style.color='black';
    }
    </script>
     
    McKirahan, Nov 13, 2004
    #2
    1. Advertising

  3. Rob

    McKirahan Guest

    "McKirahan" <> wrote in message
    news:bfuld.28810$V41.18417@attbi_s52...
    > "Rob" <> wrote in message
    > news:4196692f$0$14507$...
    > >
    > > Hi all,
    > > Javascript is not my strong point but I have a little problem with a
    > > function.
    > >
    > > I have ASP code that displays form variables for x number of users.
    > > Depending on the radio button they click, I highlite some text in red
    > > over another form variable to show that it's mandatory. I use a <span>
    > > tag for the text and a Javascript function to change the text color of
    > > that user's mandatory field.
    > >
    > > My Javascript call passes (i) to show which user I'm talking about but
    > > the problem is I don't know how to change that user's text color.
    > > Here's my function
    > > <script language="JavaScript">
    > > <!--
    > > function ChangeTextColor(num){
    > > membertype_1.style.color='red';
    > > memberno_1.style.color='black';
    > > lastname_1.style.color='black';
    > > }
    > >
    > > //-->
    > > </script>
    > > As you see, I'm not using the parameter "num" so it only works for the
    > > first user. I need to know how to make it dynamic...I've tried
    > >
    > > membertype_[+num+].style.color='red';
    > >
    > > but that doesn't work.
    > > Anyone know the syntax?
    > >
    > > Thanks
    > > Rob

    >
    > Try the following:
    >
    > <script type="text/javascript">
    > function ChangeTextColor(num) {
    > document.getElementById("membertype_"+num).style.color='red';
    > document.getElementById("memberno_"+num)style.color='black';
    > document.getElementById("lastname_"+num).style.color='black';
    > }
    > </script>
    >


    Oops, I forgot one of the dots; try this instead:

    <script type="text/javascript">
    function ChangeTextColor(num) {
    document.getElementById("membertype_"+num).style.color='red';
    document.getElementById("memberno_"+num).style.color='black';
    document.getElementById("lastname_"+num).style.color='black';
    }
    </script>
     
    McKirahan, Nov 13, 2004
    #3
  4. Rob

    Rob Guest

    Perfect. Thank you very much.

    Rob


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Rob, Nov 14, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. shruds
    Replies:
    1
    Views:
    894
    John C. Bollinger
    Jan 27, 2006
  2. Boonish
    Replies:
    4
    Views:
    7,405
    Ben C
    Sep 30, 2006
  3. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    563
    dorayme
    Jun 26, 2009
  4. Stéphane Klein
    Replies:
    2
    Views:
    1,831
    John Nagle
    Mar 30, 2010
  5. Stefan Behnel
    Replies:
    0
    Views:
    498
    Stefan Behnel
    Mar 29, 2010
Loading...

Share This Page