Changing the color of a specifc DIV

how to change the color of a div

[kdigennaro]

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]

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]

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]

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]

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]

welcome to WebmasterWorld, Kevin !