document.getElementById problem

Hello,

I have this in my CSS:

#contentbox a{
	font-weight: bold;
	color: #c8a468;
	cursor: pointer;
}

And want to change the color with Javascript's function: document.getElementById, but when I use document.getElementById('contentbox a').style.color= "#d05048", I get an error that it doesn't know 'contentbox a'.

I tried multiple things and searched on google, but I cannot get it to work.

Who can help me? It's a simple question...

Begjinner

Light Poster

36 posts since Jan 2008

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

Hi there,

you have made mistake here

document.getElementById('contentbox a').style.color= "#d05048"

that should look like

document.getElementById('contentbox').style.color= "#d05048"

Example:

CSS:

<style type="text/css">
#contentbox, #contentbox a{
	font-weight: bold;
	color: #c8a468;
	cursor: pointer;
}
</style>

JavaScript:

<script type="text/javascript">
function changeColor(){
	var divID = document.getElementById('contentbox');
	divID.style.color= "#d05048";
}
</script>

HTML:

<div id="contentbox">
<a href="javascript:void(0);" onClick="changeColor()">Link Text</a> Other Text </div>

hope this will help you

Rahul Dev

katarey

Junior Poster

167 posts since Jul 2005

Reputation Points: 39

Solved Threads: 23

4 Years Ago

0

Hi, thanks for your help, but the 'a' is there on purpose. I want to change the colour of links only in the div 'contentbox' (with javascript).

Begjinner

Light Poster

36 posts since Jan 2008

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

hi you can not do directly like this, the way you have tried is wrong.
getElementById() takes only id.

use elem.getElementsByTagName('tag name');
this will return array of element('tag name') inside elem.
using loop you can...........
i think this much is enough.

DangerDev

Posting Pro in Training

485 posts since Jan 2008

Reputation Points: 165

Solved Threads: 59

4 Years Ago

0

infinite

aravelli

Newbie Poster

21 posts since Feb 2008

Reputation Points: 10

Solved Threads: 2

4 Years Ago

0

aravelli, that works, thank you, but only for the first one containing the id. On some pages I have more links and now only the first one changes.

this is what I have:

try{document.getElementById('contentbox a').style.color= "#d05048";}catch(err){};

there is a try...cath function because some pages don't have the 'contentbox a' id.

Begjinner

Light Poster

36 posts since Jan 2008

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

text goes here
text goes here
text goes here

aravelli

Newbie Poster

21 posts since Feb 2008

Reputation Points: 10

Solved Threads: 2

4 Years Ago

0

I have links in the contentbox and I have links in my menu. When I use CSS to change "a" the menu gets the wrong colours and cannot be fixed with div's because the "a" tag comes as last and so overwrites the rest.

I want to only change the link colours in the contentbox but javascript doesn't understand the id "contentbox a" because it's the id "a" in the id "contentbox" .

When I gave the links an id (all the same id) it worked, but javascript only changed the first id, while there are more on some pages. Maybe it can be done with a while loop, but I have no idea how.

Begjinner

Light Poster

36 posts since Jan 2008

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

change the css like this

aravelli

Newbie Poster

21 posts since Feb 2008

Reputation Points: 10

Solved Threads: 2

4 Years Ago

0

An id can be used only once. It can NOT appear in multiple tags.

You need to give each tag a unique id, and then cycle through the ids with a loop in js.

e.g.

<a .... id="aa1">
<a .... id="aa2">
<a .... id="aa3">
<a .... id="aa4">
<a .... id="aa5">

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

4 Years Ago

0

Alternatively, try this trick, if you don't mind presetting the available colors ( in a way, it's better because those colours can be defined in the CSS ). This works by dynamically changing the class of the containing element, the CSS 'cascade' effect sorts out the rest:

<html>
  <head>
    <title>Color changing magic with a classname trick</title>
    <style type="text/css">
      div.red_links a
      {
        color:red;
      }
      div.blue_links a
      {
        color:blue;
      }
    </style>
    <script type="text/javascript">
      function set_linkcolor( to )
      {
        document.getElementById( "color_state" ).className = 
              to + "_links";
      }
    </script>
  </head>
  <body>
    <div id="color_state" class="red_links">
      <ul>
        <li><a>An anchor</a></li>
        <li><a>Another</a></li>
        <li><a>And another</a></li>
        <li>Some normal text</li>
        <li>Some more..</li>
        <li>And some more</li>
      </ul>
    </div>
    <span onmousedown="set_linkcolor( 'blue' )" 
         onmouseup="set_linkcolor( 'red' )" 
         style="border:solid 1px black;">
      Click me!
    </span>
  </body>
</html>

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

4 Years Ago

0

Thanks MattEvans, after a short trying period I got it working with your 'system'.

Begjinner

Light Poster

36 posts since Jan 2008

Reputation Points: 10

Solved Threads: 0

2 Years Ago

Show Comments

-1

You should go like this...

//////////////// elementParentId is the Id of the element that contains all the elemens to be changed, newColor explains itself, tagName is the type of element you want to change/////////////////////////

function changeColor(elementParentId , tagName, newColor){

elements=document.getElementById(elementParentId ).getElementsByTagName(tagName);

for(i=0;i

bertsaga

Newbie Poster

1 post since Jan 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

aravelli, that works, thank you, but only for the first one containing the id. On some pages I have more links and now only the first one changes.

this is what I have:
try{document.getElementById('contentbox a').style.color= "#d05048";}catch(err){};
there is a try...cath function because some pages don't have the 'contentbox a' id.

you need to do it this way

var num=document.getElementById("contentbox").childNodes.length;
	for(var i=0;i<num;i++){
if(document.getElementById("contentbox").childNodes[i].nodeName=="A"){
document.getElementById("contentbox").childNodes[i].style.color="#d05048";
		}
	}

essentially you loop through all the elements of div content box for all the links and then you change them.

wrivera

Junior Poster in Training

53 posts since Jan 2010

Reputation Points: 10

Solved Threads: 10

document.getElementById problem

This question has already been solved