...

View Full Version : Resolved using getElementById properly?



jdphoto
05-25-2009, 12:29 AM
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.



<!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>

TinyScript
05-25-2009, 02:59 AM
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.

auslin
05-25-2009, 11:36 AM
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):



<!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.

jdphoto
05-25-2009, 02:37 PM
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

abduraooft
05-25-2009, 02:58 PM
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/prop_style_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/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F
http://www.bonrouge.com/
http://htmldog.com/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum