|
JavaScript - Help Changing Background Color Using Js
Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function.
I think I am overthinking the process - as always! Any help pointing out my mistake(s) would be greatly appreciated. Code:
function show_color()
{
var show_prompt = prompt("Please enter a color name");
var change_body = document.getElementById("body");;
show_prompt = change_body;
change_body = change(this.id);
}
function change(id)
{
switch (id)
{
case 'red':
document.body.bgColor = "red";
break;
case 'green':
document.body.bgColor = "green";
break;
case 'yellow':
document.body.bgColor = "yellow";
break;
case 'blue':
document.body.bgColor = "blue";
break;
case 'pink':
document.body.bgColor = "pink";
break;
}
}
Similar Tutorialshi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks Code: <iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe> I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like: <head> <title> Basics Exercise</title> <script type="text/javascript" src="js.js"></script> </head> <body> <form> <p> Click this button and the document's color will change again </p> <input name="button" type="button" value="Change the background color of the document"/> </form> js.js has function changecolor() { document.bgColor='#ea0d17'; } document.forms[0].button.onClick=changecolor(); I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working. OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html>
<head><title>menu</title>
<script type="text/javascript">
var element = null;
function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
}
element = xx;
xx.style.backgroundColor='navy';
}
</script>
<style type="text/css">
a {text-decoration:none; color:white}
a:visited {color:white}
a:active {color:white}
a:hover {color:white}
table#lay_menu {width:100%; margin:0px}
table#lay_menu td {text-align:center; width:20%}
.menu {text-align:center; background-color:gray; }
.start {text-align:center; background-color:navy; }
</style>
</head>
<body>
<table id="layout">
<tr>
<td width="188">
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">CPAs</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">Doctors</div>
</a> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title>
<script language=javascript>
colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
cRGB = [];
function toRGB(color){
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
return rgb;
}
for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}
function changeColor(target){
var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
var set = false;
var xx;
for(var i=0; i<cRGB.length; i++){
if(swapper == cRGB[i]){
if(((i+1)) >= cRGB.length){
xx = 0;
}else{
xx = i+1;
}
document.getElementById(target).style.backgroundColor = colors[xx];
document.getElementById(target).style.backgroundImage.show;
set = true;
i=cRGB.length;
}
}
set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}
</SCRIPT>
</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
</body>
</html>
Demo: http://theclutch.com/rollover_color_..._bgndimage.htm Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id)
{
var txtObj = document.all(id);
if (txtObj.style.display == 'none')
{
txtObj.style.display = ''
txtObj.style.backgroundColor = 'grey';
}
}
function hideLayer793BKColor(id)
{
var txtObj = document.all(id);
if ( txtObj.style.backgroundColor == 'grey' )
txtObj.style.display = 'none';
}
These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst Hello, I can't seem, for the life of me to get this to work at all. I've tried everything out there and can't get it to work with IE 7: I would like to change the border color of my table row on hover. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.test {
border:1px solid #9CA4AA
}
.test:hover { border:1px solid #666666 }
</style>
</head>
<body>
<table width="536" style="border:1px solid #9CA4AA" cellspacing="0" cellpadding="1">
<tr class="test">
<td> </td>
</tr>
</table>
</body>
</html>
I desperately need your help before I have no hair left. Thanks for all your help in advance, Cheers, J So my functions are dealing with Time. The function delay_time() is called by clicking a button in html and the return value of the function is displayed in a textbox. What I need to do is basically if the value of resultingtime is greater that the value of delay time I need the value shown in red(ff0000) and bold and if it isnt then I need it displayed in bold green(00ff00). but Ive tried doing this in my javascript and found that I cant code it in there the way that I know. I really dont know what to do... I think that I have to do it in the html coding but I dont know how. Here is the javascript I wrote: Code: function delay_time(idealTime, startTime, stopTime, delayTime) {
var delay_time = idealTime.value;
var bigger_time = stopTime.value;
var smaller_time = startTime.value;
var resultingtime = subtract_time(bigger_time, smaller_time, delay_time);
//if (resultingtime > delay_time) {
//resultingtime = resultingtime.fontcolor("ff2000");
//resultingtime = resultingtime.bold();
//}
//else {
//resultingtime = resultingtime.fontcolor("60ff00");
//resultingtime = resultingtime.bold();
//}
delayTime.value = resultingtime;
}
function subtract_time(bigger_time, smaller_time, delay_time) {
var bigger_value = convert_time_to_value(bigger_time);
var smaller_value = convert_time_to_value(smaller_time);
var idealTime = delay_time;
var resultingtime = bigger_value - smaller_value;
return resultingtime;
}
function convert_time_to_value(time_format) {
var hh = time_format.substring(0, 2);
var mm = time_format.substring(3, 5);
var time_value = (eval(hh) * 60) + (eval(mm) * 1);
return time_value;
}
and here is the html code for the button : Code: ID="Button15" type="button" value="Delay Time"
onclick="delay_time(document.getElementById('TextBox102'), document.getElementById('TextBox104'), document.getElementById('TextBox105'), document.getElementById('TextBox106'))"/>
here is the text box I have the value going into: Code: <asp:TextBox ID="TextBox106" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: medium" Width="0.75in" BorderStyle="Inset"></asp:TextBox>
and here is the code from the box that I need to know if the value is bigger or smaller than: Code: <asp:TextBox ID="TextBox102" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: medium; text-align: right;" Width="0.5in" BorderStyle="Inset"></asp:TextBox>
please help. Hello I want to html text to show diffrent color, if date in list is in the past. shoud this even work ? am i hopeless? Code: <script type="text/javascript">
var day = d.getDay();
var event = this.document.getElementById('list');
if ('day' < 'event')
{
document.getElementById('list').style.color = '#DB35B0'
}
</script>
<ul>
<li id ="list">26/02/12 Some happening here</li>
<li id ="list">27/02/12 Some happening here</li>
<li id ="list">28/02/12 Some happening here</li>
</ul>
Hey guys, I have been trying to get better at my javascript as of late and there is this one particular color fading technique I have found that I am having trouble dissecting. The following code appears to be how they are making a rollover go from a dark gray to a subtle light gray with a nice fade but I can't exactly tell whats going on from the code. Is it just telling it to add a rgb point in so many seconds? Any professional help would be greatly appreciated. Code: colorInit=
true}b.elem.style[a]="rgb("+Math.max(Math.min(parseInt(b.pos*(b.end[0]-b.start[0])+b.start[0],0),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[1]-b.start[1])+b.start[1],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[2]-b.start[2])+b.start[2],0),255),0)+")"}});
I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour. My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to. I've only ever done a small amount of JS coding but from the research I've done it should go something like this, Code: document.style.alinkColor = "COLOR" I got to that via discovering that Code: document.style.backgroundColor = "COLOR" will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case. Anyone able to point me in the right direction? Is it possible to give an anchor tag an id and call it with GetElement? this is what I have tried: Code: <a id="link1" href="test.html">Part 1</a></li> Code: document.getElementById("link1").style.color = "blue";
This is my CSS: Code: A:link {
color:#ffffff;
font-size:14pt;
font-weight:bold;}
A:visited {
color:#ffff00;
font-size:14pt;
font-weight:bold;}
A:hover {
color:#6698ff;
font-size:14pt;
font-weight:bold;}
A:active {
color:#c0c0c0;
font-size:14pt;
font-weight:bold;}
Hi all, I currently have this javascript that will change the cell to green with one click... Code: <script type="text/javascript">
function ColorChange(obj){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#66CC33';
obj.parentNode.style.backgroundColor='#66CC33';
}
</script>
echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>";
the problem is that I need around 3 different colors to be possible.. e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange. I'm not sure how to take this javascript further? Would someone be kind enough to point me in the right direction? Many thanks, Greens85 I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');
function getLabels()
{
for (x=0; x<spans.length; x++)
{
if (spans[x].className == "LabelWrapper")
{
labelspans.push(spans[x]);
}
}
for (y=0; y<labelspans.length; y++)
{
labels.push(labelspans[y].firstChild);
radioname.push(labelspans[y].firstChild.htmlFor);
}
}
function getRadios()
{
//will put all radio groups into the "radiolist" array
for (z=0; z<radioname.length; z++)
{
radiolist.push(document.getElementsByName(radioname[z]));
//will add Event Listener to each radio button, and add each one to the "radios" array
for (i=0; i<radiolist[z].length; i++)
{
chkradio = radiolist[z][i];
chkradio.setAttribute("count",Number(z));
chkradio.addEventListener("click", function(){changeLabel()}, false);
radios.push(chkradio);
}
}
}
function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly
{
for (w=0; w<radios.length; w++)
{
if (radios[w].checked)
{
a = radios[w].getAttribute("count");
labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
}
}
}
getLabels();
getRadios();
This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? I am very new to coding, trying to teach myself some javascript. I know this is a very simple code, I just can't seem to nail down what is going wrong. Feeling really stupid right now. Heres the code: Code: <html>
<head>
<script language="JavaScript">
var choice=confirm("Press ok for black. Press cancel for red.");
if (choice==true){
document.bgColor="yellow";
document.fgColor="black";
}
else {
document.bgColor="red";
document.fgColor="white";
}
</script>
<body>
<p>words</p>
</body>
</html>
If someone could take a second to set me straight, I would really appreciate it. btw: hope I posted all this according to the "rules". I tried Hi, I'm working on a site that has a sky as the background, the idea is that the background image will change according the the time of day... Sunrise, day, sunset, night... I have been using this code... <!-- JavaScript --> <script language="JavaScript"> var d = new Date() var h = d.getHours() // if (h < 6) document.write('<body background="sky.jpg" bgcolor="white">') else if (h < 12) document.write('<body background="day.jpg" bgcolor="white">') else if (h < 18) document.write('<body background="day.jpg" bgcolor="white">') else if (h < 24) document.write('<body background="night.jpg" bgcolor="white">') </script> This works fine for most hours but when in the hours of 5, 12, 18 and 24 the screen is blank (white background no image) any ideas why this might be happening? Thanks for any ideas in advance! Hey guys, So I have a top navigation bar with links in it and when I hoover over a link I want the navigation bars background image to change. The links are actually Images with an <a href=""></a> tag around them. The site isn't live so I can't give you a link. Here is the code: HTML ( I want the id="Nav" background to change when I hover over the "Home" "Forums" "Downloads" "Contact" Images ) Code: <div id="Nav"> <div id="Splitters" class="clearfix"> <div id="group1"> <img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" /> </div> <div id="group2"> <img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" /> </div> <div id="group3"> <img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" /> </div> </div> <div id="Nav_Text" class="clearfix"> <a href="#"> <img id="Home" src="images/Home.png" alt="" width="48" height="11" /> </a> <a href="#"> <img id="Forums" src="images/Forums.png" alt="" width="71" height="11" /> </a> <a href="#"> <img id="Downloads" src="images/Downloads.png" alt="" width="109" height="11" /> </a> <a href="#"> <img id="Contact" src="images/Contact.png" alt="" width="80" height="11" /> </a> </div> </div> CSS Code: #Nav {
background: url(images/Main.png) no-repeat;
left: 0;
min-height: 70px;
position: absolute;
top: 0;
width: 100%;
}
#Splitters {
left: 421px;
position: absolute;
top: 0;
width: 334px;
}
#group1 {
display: inline;
float: left;
margin: 0 0 0 107px;
width: 2px;
}
#Layer_3_copy {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group2 {
float: left;
margin: 0 0 0 95px;
width: 2px;
}
#Layer_3_copy_3 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group3 {
float: right;
margin: 0;
width: 2px;
}
#Layer_3_copy_4 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#Nav_Text {
left: 449px;
position: absolute;
top: 29px;
width: 397px;
}
After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly. Code: <html>
<title>Welcome :D</title>
<head>
<style type="text/css">
body {
background-color:E6E6E6;
}
</style>
<script type="text/javascript">
//Pre loading images to be used with check boxes.
function preLoad(){
Eyeball= new Image(400,200)
Eyeball.src = "Eyeball.jpg"
Smileys = new Image(400,200)
Smileys.src = "Smileys.gif"
goodAfternoon = new Image(400,200)
goodAfternoon.src = "Good Afternoon.gif"
goodAfternoonFinal = new Image(400,200)
goodAfternoonFinal.src = "Good Afternoon.gif"
zombies=new Image()
zombies.src = "Zombies.jpg"
}
function validate(){
if(document.getElementById("cb1").checked){
document.goodAfternoon.src=Eyeball.src;
}else{
document.goodAfternoon.src=Smileys.src;
}
}
function reset(){
cb1.checked=false;
document.goodAfternoon.src=goodAfternoonFinal.src;
}
var i=0;
function myalert(){
i++
if(i == 1){
alert("I dare you to press me again....");
}
if(i == 2){
}
if(i == 3){
i = 0;
document.body.background = "zombies.src";
}
}
</script>
</head>
<body onLoad="javascript:preLoad()">
This is where I learn a lot of my coding for Java, JavaScript, and HTML
<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
</br>
"Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
<img src="Good Afternoon.gif" name="goodAfternoon">
<input type="button" id="cb2" value="RESET" onClick="reset()"/>
</BR></br></br></br></br>
Hello, thank you for visiting my webpage I hope you like it.
<input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>
Hi! all I have a js which change the background color onclick event. This is the code Code: function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert. Thanks for your help. Hey, been racking my brain for about an hour now, and cant seem to work this one out... I need to in javascript, get the HEX value (#FFFFFF) of a div's background color... Code: style.backgroundColor doesnt seem to work... But it seems to be different in every browser, and i cant seem to make it work... (it must work in IE, FF, Chrome, Safari) I have tried using a couple of examples, but nothing seems to work... Any ideas? Thanks Hi, I have the following javascript codes. I have two textboxes with id "pano" and "pano2" My function creates numbers randomly and that if random number==1 let the background of textbox2 be pink and if random number==2 textbox1 be red. The code works fine for document.bgColor but it does not work for textboxes how can I modify the code so that I can change the background color of any textboxes ? thanks.. <script> aaa=setInterval("letsgo()",500); function letsgo() { rno=Math.floor(Math.random()*3)+1; document.getElementById("counter").value=rno; if(rno==3) { document.bgColor="green"; } if(rno==2) { var pano=document.getElementById("pano"); document.pano.bgColor="red"; } if(rno==1) { var pano2=document.getElementById("pano2"); document.pano2.bgColor="pink"; } } </script> <input type="text" id="counter" style="position:absolute;top:10px;left:50px;width:60px;height:20px;"> <input type="text" id="pano" style="position:absolute;top:100px;left:100px;width:200px;height:200px;"> <input type="text" id="pano2" style="position:absolute;top:100px;left:400px;width:200px;height:200px;"> |
|||||||