Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Location
    Austin
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    using getElementById properly?

    I'm re-learning javascript and having some problems figuring out the best path for my solution.

    I'm trying (for the sake of learning) to build a table of multiple background colors (each <td> having it's own color and using the hex #'s.) Then, an onClick over that <td> will change the entire page's background to the same color. That was the hard part and I got that. What has stumped me is I wanted to then use document.write (or anything) to say, in effect, "the background color is now: "hex#####" and have the current background color (in Hex) written. And have it update to reflect the new background color when I click on a new color.

    I've tried doing this by calling a function and using getElementById and other work arounds, but nothing works. I KNOW that it's because I'm making a novice mistake (can I give an <a href> an id? or a name? and then reference it elsewhere? How do I parse that out?

    The learning side of me would really love any attempt on your part to explain an answer. (ie, can't use elementbyid because..., or must use function because...).

    Again, the color change works, just not printing the actual changed hex codes.

    I'm working in Dreamweaver, cs4, using firefox until I actually can do something worth putting online. Windows.XP, if if matters.


    Below is the cleanest attemtp using getElementById.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My bgcolor grid 1</title>
    <script language="javascript">
    var newBGColor=document.getElementById(myBackColor).name;
    </script>
    </head>
    <body>
    <h1>Background color</h1>
    <table width="200" border="0">
      <tr><td bgcolor="#cc9900" width="20"><a href ="#"  id="myBackColor" name="#cc9900"  onClick = "document.bgColor='#CC9900'; return false;">#CC9900</a>
        <td bgcolor="#993399" width="20"><a href ="#" id="myBackColor" name="#993399" onClick = "document.bgColor='#993399'; return false;">#993399</a></td>
        <td bgcolor="#9999FF" width="20"><a href ="#" id="myBackColor" name="#9999ff" onClick = "document.bgColor='#9999FF'; return false;">#9999FF</a></td>
        <td bgcolor="#FFFFCC" width="20"><a href ="#" id="myBackColor" name="#FFFFCC"  onClick = "document.bgColor='#FFFFCC'; return false;">#FFFFCC</a></td>
      </tr>
      </table>
    <h1>The background color is now: </h1>
    <!-- here I'm wanting it to print a "#CC9900" if the first <td> is clicked or a "#FFFFCC" if the last <td> is clicked -->
    <script language="javascript">
    document.write(newBGColor)
    </script>
    <h1>The cow jumped over the moon.</h1>
    </body>
    </html>
    Last edited by jdphoto; 05-25-2009 at 02:55 PM. Reason: now resolved

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    give themm all unique id names and it should work. When you call for an id and there are more than one id of that name, it's not going to work.

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    With an xhtml document, document.write should not be used. Doubly so here, as you want just one element to update, not the whole page, when a link is clicked. So therfore use innerHTML for updating the target element. Also note that script type must be "text/javascript". And event names must be all lower case (not onClick).

    Those issues dealt with, one way to make it work is to pass the colour string as a function arguement (should not use a name attribute to store & retrieve something). And have a <span> inside the <h1> as the element to be updated. Try the following (link id attributes not used in this example):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My bgcolor grid 1</title>
    <script type="text/javascript">
    function setBGColor(the_color) {
      document.getElementsByTagName("body").item(0).style.backgroundColor = the_color;
      document.getElementById("span_color").innerHTML = the_color;
    }
    </script>
    </head>
    <body>
      <h1>Background color</h1>
      <table width="200" border="0">
        <tr>
          <td bgcolor="#CC9900" width="20"><a href="#" id="myBackColor1"
              onclick = "setBGColor('#CC9900');return false;">#CC9900</a>
          </td>
          <td bgcolor="#993399" width="20"><a href="#" id="myBackColor2"
              onclick="setBGColor('#993399');return false;">#993399</a>
          </td>
          <td bgcolor="#9999FF" width="20"><a href="#" id="myBackColor3"
              onclick="setBGColor('#9999FF');return false;">#9999FF</a>
          </td>
          <td bgcolor="#FFFFCC" width="20"><a href="#" id="myBackColor4"
              onclick="setBGColor('#FFFFCC');return false;">#FFFFCC</a>
          </td>
        </tr>
      </table>
      <h1>The background color is now:
        <span id="span_color"></span>
      </h1>
      <h1>The cow jumped over the moon.</h1>
    </body>
    </html>
    And a couple of other things to think about:
    * bgcolor is deprecated; the style property background-color is better.
    * The use of a table is not really justified here. Those links can be easily be
    styled and floated into that position without a table. They could have the
    background colours rather than applying them to the <td>s.

  • Users who have thanked auslin for this post:

    jdphoto (05-25-2009)

  • #4
    New to the CF scene
    Join Date
    May 2009
    Location
    Austin
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for all your input! I had toyed with some of what you used, but never got it right.

    I can't seem to get background-color to work, though (instead of bgcolor).

    Thanks especially for giving me other suggestions and thoughts. Any chance you can recommend websites that use both currently acceptable coding and good examples for javascript?

    Thanks

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I can't seem to get background-color to work, though (instead of bgcolor).
    http://www.w3schools.com/css/css_background.asp
    http://www.w3schools.com/HTMLDOM/pro...background.asp
    Thanks especially for giving me other suggestions and thoughts. Any chance you can recommend websites that use both currently acceptable coding and good examples for javascript?
    https://developer.mozilla.org/en/Gec..._is_the_DOM.3F
    http://www.bonrouge.com/
    http://htmldog.com/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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