SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using getElementByID

    OK - If you guys wanna kick me out of here for asking the same stupid questions, I will understand

    I want to write two functions, one to highlight on focus and one to remove the highlight on blur. I can't seem to get past the getElementByID method.
    Code:
    <script language="JavaScript">
    function highlight(element){
     var elem = document.getElementById(element);
      elem.bgcolor = "#ffff99";
    }
    </script
     
    <table border="0" cellpadding="4" cellspacing="0">
     <tr>
      <td><b>Name:</b></td>
      <td><input id="FName" type="text" size="20" onfocus="hightlight(this)"></td>
     </tr>
    </table>
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here is what was wrong:
    • "highlight" was spelled wrong in your <input> tag.
    • "elem.bgcolor" isn't correct. You must use "elem.style.backgroundColor" instead.
    • Your closing <script> tag is still open, it's "</script" right now.
    • You need a "name" for your <input> if you're going to be submitting the form to a server-side script (the ID is only for CSS and JS recognition, the server still needs a "name" attribute).

    Here's your fixed HTML and JS. I also added a back to normal function for when the user blurs out of the page:
    HTML Code:
    <script language="JavaScript"> 
    function highlight(element)
    { 
    var elem = document.getElementById(element); 
    elem.style.backgroundColor = "#ffff99"; 
    } 
    function back2normal(element)
    {
    var elem = document.getElementById(element);
    elem.style.backgroundColor = "white";
    }
    </script>
     <table border="0" cellpadding="4" cellspacing="0">  
    <tr>  
    <td><b>Name:</b></td> 
     <td>
    <input id="FName" name="FName" type="text" size="20" onfocus="highlight(this);" onblur="back2normal(this);">
    </td>  
    </tr> 
    </table>

  3. #3
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <Script language="Javascript">
    function highlightTag(tagID, clr)
    {
    var obj = document.getElementById(tagID);
    obj.style.backgroundColor=clr;
    }
    </script>
    <table border="0" cellpadding="4" cellspacing="0"> <tr> <td><b>Name:</b></td> <td>
    <input id="FName" type="text" size="20" onfocus="highlightTag(this.id,'gray')" 
    onblur="highlightTag(this.id,'white')"></td> </tr> </table>
    One function does it all, and you can pass whatever color you want, which makes the function much more flexible.
    Last edited by gregc; Jun 12, 2003 at 19:55.

  4. #4
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. I should have looked at my code a little closer

    I took the liberty of combing what the two of you wrote into one - one function, one place to set colors.

    Code:
    function highlightTag(tagID,action)
    {
     var obj = document.getElementById(tagID);
     if(action == 'focus')
     {
      obj.style.backgroundColor = '#ffff99';
     } else {
      obj.style.backgroundColor = '#ffffff';
     }
    }
     
    onfocus="highlightTag(this.id,'focus')" onblur="highlightTag(this.id,'blur')"
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, just thinking...
    Why not
    function highlightTag(tagID, highlight)
    where highlight is a boolean value (true/false) ?
    Must be more efficient than comparing strings, i.e. you can change
    if(action == 'focus')...
    to
    if(highlight)...

  6. #6
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by westmich
    Thanks for the help. I should have looked at my code a little closer [img]images/smilies/frown.gif[/img]

    I took the liberty of combing what the two of you wrote into one - one function, one place to set colors.
    Code:
    function highlightTag(tagID,action)
    {
    var obj = document.getElementById(tagID);
    if(action == 'focus')
    {
    obj.style.backgroundColor = '#ffff99';
    } else {
    obj.style.backgroundColor = '#ffffff';
    }
    }
    
    onfocus="highlightTag(this.id,'focus')" onblur="highlightTag(this.id,'blur')"
    That's only making my script more complicated than it should be, and kills the flexibility offered by passing the color parameter through the function. Why add extra verbiage when all it's going to do is make the script less flexible to work with in other areas? It doesn't make sense.

    So if you wanted to use the same function to make a different tag a different color, you couldn't do it (you could with my script though). I have no idea why you would want to alter my script, it was as efficient as you could possibly ask for.

  7. #7
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the reason I changed is that the selected colors will probably change. So if the color setting is in the script (or better a CSS class name) and the script is in an include, I only have to change it in one place - not 200 to 300 places.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  8. #8
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by westmich
    Well, the reason I changed is that the selected colors will probably change. So if the color setting is in the script (or better a CSS class name) and the script is in an include, I only have to change it in one place - not 200 to 300 places.
    Oh, that's a good point. I wasn't even thinking of that...well, good luck with your site.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •