3 Replies - 5580 Views - Last Post: 28 February 2011 - 10:16 AM

#1 Dark Samus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 03-January 11

Change Div Background Colour Using a List box

Posted 28 February 2011 - 03:46 AM

How would I go about changing the colour of a div, using a list-box, as opposed to buttons?

I think I have figured out how to create the list box, but I am stumped as to what to do using Javascript.

Looking on Google, there is no much help on what I am trying to do (e.g. there is only code on changing div colours via an image hover etc).

Here is my CSS and HTML code.

CSS:
/// This the body table I want to change via Javascript
div#main {
width: 5%; 
background-color:#000;  
}



HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainbody">
<p>
/// This is the list-box that will change the dic background colour
<select id="color" onclick="getbackgroundcolour();">
          <option value="black">black</option>
          <option value="white">white</option>
        
        </select>
        
</p>
</div>
</body>
</html>



I would be very grateful for any help given.


Is This A Good Question/Topic? 0
  • +

Replies To: Change Div Background Colour Using a List box

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,592
  • Joined: 08-June 10

Re: Change Div Background Colour Using a List box

Posted 28 February 2011 - 03:58 AM

there are some ways to choose from, but probably the best bet is to use the dropdown for changing class names.
.black {
	background-color: black;
}
/*  */

use the onchange event on the dropdown.
<select id="color">
	<option value="black">black</option>
	<option value="white">white</option>
</select>

document.getElementById("color").onchange = function (event) {
	var div = document.getElementById("main").className = this.value;
}

Was This Post Helpful? 1
  • +
  • -

#3 Dark Samus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 03-January 11

Re: Change Div Background Colour Using a List box

Posted 28 February 2011 - 09:44 AM

View PostDormilich, on 28 February 2011 - 03:58 AM, said:

there are some ways to choose from, but probably the best bet is to use the dropdown for changing class names.
.black {
	background-color: black;
}
/*  */

use the onchange event on the dropdown.
<select id="color">
	<option value="black">black</option>
	<option value="white">white</option>
</select>

document.getElementById("color").onchange = function (event) {
	var div = document.getElementById("main").className = this.value;
}


Ok, I have this code onto my webpage. However, I have tested the page in Firefox and IE, which doesn't work. What am I doing wrong?

HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to change div colour via javascript</title>
<meta name="Description" content="How to Build a Basic CSS Layout" />
<meta name="Keywords" content="css layout" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="stylesheet2.css" type="text/css" />
<script language="javascript">
document.getElementById("color").onchange = function (event) {
	var div = document.getElementById("main").className = this.value;
}
</script>
</head>
<body>
<select id="color">
	<option value='000'>black</option>
	<option value='000'>white</option>
</select>
<div id="main">
</div>
</body>
</html>



CSS
.black {
	background-color: black;
}
/*  */

.black {
	background-color: white;
}
/*  */


#main {
width: 95%; 
background-color:#000;  
}


.main {
width: 95%; 
background-color:#000;  
}


Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,592
  • Joined: 08-June 10

Re: Change Div Background Colour Using a List box

Posted 28 February 2011 - 10:16 AM

it would probably help to call the class for the white background not "black".

and of course you have to define the event after the select has been read into the DOM (i.e. at the end of the HTML document or triggered by a window.onload call)

This post has been edited by Dormilich: 28 February 2011 - 10:17 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1