/    Sign up×
Community /Pin to ProfileBookmark

Get all elements by id or tags

Copy linkTweet thisAlerts:
Jan 12.2011

Hi,

I have a function to change the color of different elements on the page.

function updateElement(color,id) {
document.getElementById(id).style.backgroundColor = ‘#’+color;

}

The problem is, is how do I make it so the function doesn’t only apply the new colour to the first occurance of that element.

eg. i have 4 boxes (div’s) with id=”box” so i want to change the background of all 4 boxes

Thanks.
nmyster

to post a comment
JavaScript

22 Comments(s) ↴

Copy linkTweet thisAlerts:
@JavaScriptNickJan 12.2011 — document.getElementsByTagName("div");

Then just go through your array and change the color of each div.
Copy linkTweet thisAlerts:
@JavaScriptNickJan 12.2011 — function updateElement(color) {

var allDivs = document.getElementsByTagName("div");

for (i=0;i<allDivs.length;i++) {

allDivs[i].style.backgroundColor = '#'+color;

}



}
Copy linkTweet thisAlerts:
@nmysterauthorJan 12.2011 — Thanks for the quick reply. This works,

However, I want this to work with id's aswell because I am using a function to change different parts of the page... basically, i need to be able to do the same with id's?

Any suggestions?

Thanks

nmyster
Copy linkTweet thisAlerts:
@KorJan 12.2011 — 

eg. i have[COLOR="Red"] 4 boxes (div's) with id="box"[/COLOR] so i want to change the background of all 4 boxes[/QUOTE]
You can't. It is HTML CSS and JavaScript illegal. You can not have more than a single element with the same[B] id[/B] on the same document. The [B]id[/B] must be [I]unique[/I]

You may give them a common [I]class[/I]. Or a common [I]custom attribute[/I], in order to separate them from the other elements. But probably it would be simpler to give them [I]indented[/I] [B]id[/B]s. Like "box[COLOR="Blue"]1[/COLOR]", "box[COLOR="Blue"]2[/COLOR]", "box[COLOR="Blue"]3[/COLOR]",..."box[COLOR="Blue"]n[/COLOR]"

Now, the code is simple
<i>
</i>function updateElement(color) {
var i=1,d;
while(d=document.getElementById('box'+(i++))){
d.style.backgroundColor = '#'+color;
}
}
Copy linkTweet thisAlerts:
@JavaScriptNickJan 12.2011 — very cool code.
Copy linkTweet thisAlerts:
@nmysterauthorJan 12.2011 — Hmm okay, Thanks so much for help guys

I'll have a play around. You see, what I am getting at, is I have a page that lets you edit the colours on the fly, the issue is that I have a navigation menu that displays the links as a block, I allow for the colour to be changed BUT i dont want that to affect all links on the page.. so yeah.

Can I child elements, ie, only the links in the div with class or id menu

Thanks

Neil
Copy linkTweet thisAlerts:
@KorJan 12.2011 — Another solution is to write a common custom attribute. make sure the name your custom attribute is not the same as any native one or as a javascript reserved word. Let's say: [B]tobecolored[/B]. If so:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
function updateElement(color) {
var allDivs=document.getElementsByTagName('div'), i=0,d;
while(d=allDivs[i++]){
if(d.getAttributeNode('tobecolored')){
d.style.backgroundColor = '#'+color
}
}
}
onload=function(){updateElement('ff0000')}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div tobecolored="yes"&gt;2&lt;/div&gt;
&lt;div tobecolored="yes"&gt;3&lt;/div&gt;
&lt;div&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@nmysterauthorJan 12.2011 — Kor,

This works! Again, thanks so much!

Its quite cool what I'm trying to make (I think so anyway) I have a template, with a js colour picker script, this then lets you pick colours for different elements on the page.

When I get all the elements working, I will then make it so when You press "Generate" it will make create a html file (using php) and maybe a css file.. not to sure yet.

So yeah, thanks for the help
Copy linkTweet thisAlerts:
@criterion9Jan 12.2011 — It might also be easier to think about it in a slightly different way. You could alter a css class very easily that could target the specific areas you are wanting to affect. Another option is to first select your navigation containing element and then looping through the child elements and making the changes that way.
Copy linkTweet thisAlerts:
@KorJan 12.2011 — Take care when handling the CSS colors in JavaScript, Some browsers will return the color in RGB format, even if you have explicit set it as HEXA.

Take for instance:
<i>
</i>&lt;div style="color:#ff0000" onclick="alert(this.style.color)"&gt;foo&lt;/div&gt;

IE and Opera will return the value as it is written, in HEXA. [I]But FireFox and Chrome will return the RGB equivalent value![/I]

So probably you should use the RGB values all over:
<i>
</i>&lt;div style="color:rgb(255,0,0)" onclick="alert(this.style.color)"&gt;foo&lt;/div&gt;
Copy linkTweet thisAlerts:
@KorJan 12.2011 — Kor,

Its quite cool what I'm trying to make (I think so anyway) I have a template, with a js color picker script[/QUOTE]
Here's a simple color palette & color picker I have created some years ago. Just for fun. Maybe it will be of some help in your project.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Color picker&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
//Color picker
//For safe (216) web colors
//Genuine code 2006 by Corneliu Lucian "Kor" Rusu corneliulucian[at]gmail[dot].com
onload = function(){
var cel = document.getElementById('tab').getElementsByTagName('td');
var R=0;var G=0;var B=0;
for(var i=0;i&lt;cel.length;i++){
cel[i].style.backgroundColor='rgb('+R+','+G+','+B+')';
cel[i].r=(R!=0)?R.toString(16):R.toString(16)+R.toString(16);
cel[i].g=(G!=0)?G.toString(16):G.toString(16)+G.toString(16);
cel[i].b=(B!=0)?B.toString(16):B.toString(16)+B.toString(16);
cel[i].onclick=function(){
document.getElementById('inp').value='#'+this.r+this.g+this.b;
//optional, the below line sets the document's background color as well
document.getElementsByTagName('body')[0].style.backgroundColor='#'+this.r+this.g+this.b;
}
G+=51;if(G&gt;255){G=0;R+=51;if(R&gt;255){R=0;B+=51;}}}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table id="tab" width="363" border="1" cellpadding="0" cellspacing="1" bordercolor="#666633"&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;br&gt;
&lt;br&gt;
&lt;input id="inp" type="text"&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@nmysterauthorJan 12.2011 — Hi,

The colour picker I am using works fine, thanks though ?

The code you sent, the while loop, I tried alterting so I could reuse with different tags,nodes etc...


Here is what I have:

Link Color: <input class="color" name="bgColor" onchange="updateElement(this.color.toString(),'link','color','a')" value"000000"/>

  • - This takes the colour code from the colour picker (which works, and is not the problem), I have then add the parameter -

    link: the custom attribute to use.

    color: what i want to change (i could put that or backgroundColor for example)

    a: the tag I want to change...


    • Then the function with alterations:

    [CODE]

    function updateElement(color,node,change,tag) {
    var allDivs=document.getElementsByTagName(tag), i=0,d;

    while(d=allDivs[i++])
    {
    if(d.getAttributeNode(node))
    {
    d.style.change = '#'+color
    }

    }

    [/CODE]

    So, in theory, this should now say (witht the parameters)

    [CODE]

    function updateElement(color,node,change,tag) {
    var allDivs=document.getElementsByTagName('a'), i=0,d;

    while(d=allDivs[i++])
    {
    if(d.getAttributeNode('link'))
    {
    d.style.color= '#'+color
    }

    }

    [/CODE]

    The problem is, this doesnt seem to work.. don't know why.

    Any suggestions?

    Thanks

    nmyster
    Copy linkTweet thisAlerts:
    @KorJan 12.2011 — And the HTML looks like...? Post those A HTML elements for us too see. One of them, at least ?
    Copy linkTweet thisAlerts:
    @nmysterauthorJan 12.2011 — When I had exactly as you posted, I added tobecoloured="yes" to some of the elements that were all div's... worked fine.. for example:

    <div class="company" tobecoloured="yes">

    COMPANY NAME
    </div>

    now, with the changes and updating the onchange event, this does not work.

    The link i want to change is:

    <a href="#" link="yes">Hello</a>

    So i am following the same theory as you said with tobecoloured. Not sure why this wouldn't work, unless im makingg some stupid mistake

    I am newish to JS btw... ?

    Thanks

    Neil
    Copy linkTweet thisAlerts:
    @JavaScriptNickJan 12.2011 — nevermind. error.
    Copy linkTweet thisAlerts:
    @KorJan 12.2011 —  unless im makingg some stupid mistake
    [/QUOTE]
    You did. You forgot to close the function with the end curly bracket
    <i>
    </i>function updateElement(color,node,change,tag) {
    var allDivs=document.getElementsByTagName('a'), i=0,d;

    while(d=allDivs[i++])
    {
    if(d.getAttributeNode('link'))
    {
    d.style.color= '#'+color
    }

    }
    [COLOR="Blue"]}[/COLOR] // you forgot this one
    Copy linkTweet thisAlerts:
    @nmysterauthorJan 12.2011 — Kor, ? I knew You'd point that out ? I missed it out when I copied and pasted the code, it is there.

    JavascriptNick, the cutom attribute is link. so on my links ill put <a href="whatever" link="yes">

    Maybe im miss understanding what your saying. ?

    Thanks

    Neil
    Copy linkTweet thisAlerts:
    @JavaScriptNickJan 12.2011 — You got it right. I'm anxious to see the completed product. Please post a link when you are finished. ?

    Cheers,

    Nick
    Copy linkTweet thisAlerts:
    @nmysterauthorJan 12.2011 — PRESSSUURREE ?

    I shall if I get it working how I have imagined.... I dont want to have to make a exact copy of a function for each element I want to change if possible ? but if thats what I need to do, then thats what I need to do ?

    Thanks

    nmyster
    Copy linkTweet thisAlerts:
    @nmysterauthorJan 12.2011 — I have isolated the problem to the line:

    d.style.change= '#'+color

    change being a parameter such as color or backgroundColor...

    So, I am thinking, I will make a function for each type of change.. although that may end up alot... so, color backgroundColor border color (if possible) and others when i think of them

    hmmm
    Copy linkTweet thisAlerts:
    @nmysterauthorJan 12.2011 — I have had some success with the "application", when it looks sexy and works nicely i'll show you guys ?
    Copy linkTweet thisAlerts:
    @nmysterauthorJan 15.2011 — Hi there.

    My page generator is now complete.

    Try it out at: http://www.nmyster.com/pagegenerator

    It requires you to login to access the generator. Use username: SampleSimon and password: password this is just for trial purposes and Will remove this user soon but wanted to let you try it out.

    The page was designed to allow you to VERY basically design your own website, well the colour scheme anyway. So fiddle around with the colours and then hit generate at the top.

    Let me know what you think and thanks for the help ?

    Thanks

    nmyster
    ×

    Success!

    Help @nmyster spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...