homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Changing the color of a specifc DIV
how to change the color of a div

 8:24 pm on Nov 7, 2013 (gmt 0)

Hello All,

I have been having some trouble jscolor over the last couple of days.

I am trying to create a button or field that on click will display a color picker and once the color is changed the color of a specified div will change. I have seen examples of this done with the background color of a page but am having trouble getting it to work with anything other than an input tag.

Below is my latest attempt, it does everything except change the specific div '#footer'. It only changes the entire background.

Any help is greatly appreciated!

<div class="color" id="footer">
<input class="color" onchange="document.getElementsByTagName('BODY')[0].style.backgroundColor = '#'+this.color">

I read in the website that you can not post links to code. Am I allowed to link to the jscolor website so you can access that code if need be?

Thank you,



 8:33 pm on Nov 7, 2013 (gmt 0)

Welcome to WebmasterWorld!


That code is selecting your page's BODY element by it's tagname. If you want to change #footer:

<div class="color" id="footer">
<input class="color" onchange="document.getElementById('footer').style.backgroundColor = '#'+this.color">

Generally, though, it's best to avoid using inline JavaScript like this, as it makes it harder to maintain.


 8:55 pm on Nov 7, 2013 (gmt 0)


Thank you for the warm welcome! And the quick response!

I can't believe I overlooked that.. I did try 'footer' but didn't change it to 'document.getElementById' which just makes sense haha.

As far as the inline JS I do agree with you. I was going to change it into a function. Would the following be correct? I have just been getting into writing my own JS after years of using snippets. So my semantics aren't always 100% correct.

document.getElementById('footer').style.backgroundColor = '#'+this.color

Thanks again for the kindness and quick response!


 9:25 pm on Nov 7, 2013 (gmt 0)

The general idea is that you want a nice clean separation of your content (HTML), presentation (CSS), and behavior (JavaScript), so you keep them all in their own files. That means attaching your event handlers (or event listeners) via JavaScript. So your markup might look like this:

<div class="color" id="footer">
<input class="color">

And then in your JavaScript file you'd attach your event handlers once the DOM was ready (the easiest way to ensure that is to put your script elements at the bottom of your page, just before the closing </body> tag). Your script might look like this:

(function () {
var footer = document.getElementById('footer'),
inputColor = footer.getElementsByTagName('input')[0];

inputColor.onchange = function () {
footer.style.backgroundColor = '#' + this.color;


 10:25 pm on Nov 7, 2013 (gmt 0)

Thank you once again for your advice! I'm happy I found this forum and hope I can give back to the community!

Best Regards,


 11:33 pm on Nov 7, 2013 (gmt 0)

welcome to WebmasterWorld, Kevin !

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved