Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

change div background onChange

Posted on 2010-01-06
4
Medium Priority
?
810 Views
Last Modified: 2012-05-08
This code I have works to change the background color.
However I would like to be able to use the option value
to change the color of the div. Is it possible to get my option value into
my javascript?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
<!--
    function colorBox()
       {
       window.document.getElementById("little_box").style.background = "#000";
	  
}
-->
</script>
<style type="text/css">
<!--
#little_box {
	background-color: #FFF;
	height: 30px;
	width: 30px;
	border: thin solid #000000;
}
-->
</style>
</head>

<body>

<form id="form1" name="form1"  method="post" action="">
  <label onchange="javascript:colorBox();">
    <select name="color" id="color">
      <option value="0033FF">blue</option>
      <option value="FF0048">red</option>
      <option value="EDFF00">yellow</option>
    </select>
  </label>
  
</form>
<div id="little_box"></div>
</body>
</html>

Open in new window

0
Comment
Question by:Luey
  • 2
4 Comments
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26192852
Yes, change to
function colorBox()
{
   window.document.getElementById("little_box").style.background = document.getElementById("color").value;
          
}

Open in new window

0
 
LVL 10

Accepted Solution

by:
Terry_focus earned 2000 total points
ID: 26192861
sorry try
function colorBox()
{
   window.document.getElementById("little_box").style.background = "#" + document.getElementById("color").value;
          
}

Open in new window

0
 
LVL 3

Expert Comment

by:russellC
ID: 26192888
How about this?
document.getElementById("little_box").Style.backgroundColor = document.getElementById("form1").value;

Open in new window

0
 

Author Closing Comment

by:Luey
ID: 31673614
Perfecto Thanks good job
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question