homepage Welcome to WebmasterWorld Guest from 23.22.59.252
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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
kdigennaro



 
Msg#: 4621912 posted 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">
</div>


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,
Kevin

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4621912 posted 8:33 pm on Nov 7, 2013 (gmt 0)

Welcome to WebmasterWorld!

document.getElementsByTagName('BODY')[0]

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">
</div>

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

kdigennaro



 
Msg#: 4621912 posted 8:55 pm on Nov 7, 2013 (gmt 0)

Fotiman,

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.


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


Thanks again for the kindness and quick response!
Kevin

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4621912 posted 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">
</div>

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;
};
})();

kdigennaro



 
Msg#: 4621912 posted 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,
Kevin

phranque

WebmasterWorld Administrator phranque us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 4621912 posted 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