...

View Full Version : Change background color in JavaScript using Arrays



s1980
09-02-2008, 11:57 AM
Hi,

I am trying to work out a code where I can change the background colour of an HTML page via external JS page. Please note that I will be using different HTML pages with different colours so have to use Arrays. Here is what I have so far!!!


here is my function,


<script language="JavaScript">

var backColor = new Array();
backColor[0] = '#000000';
backColor[1] = '#111111;
backColor[2] = '#222222';
backColor[3] = '#333333';

function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
</script>

-------------------------------------


What I need is to apply changeBG function to my HTML page using colour [0]

Any help would be greatly appreciated!

Philip M
09-02-2008, 12:11 PM
You have taken this from:-

http://www.codebelly.com/javascript/backcolorchange.html

which explains how to trigger the change on mouseover or onclick.

e.g: <a href="#" onMouseOver="javascript:changeBG(2)">Change</a>

Not sure what else you are seeking.


Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose.

s1980
09-02-2008, 12:43 PM
I would like to apply the action without having to click on/move mouse over something. is it possible?

Sorry about the title!

Philip M
09-02-2008, 12:53 PM
Well, something must trigger the change. What have you in mind?

Thnak you for changing the thread title to something meaningful.

s1980
09-02-2008, 12:54 PM
Should this work?

<body onLoad="javascript:changeBG(0)">

Please bear in mind that JS function is in an external js file

Philip M
09-02-2008, 03:57 PM
Should this work?

<body onLoad="javascript:changeBG(0)">

Please bear in mind that JS function is in an external js file

Yes, (assuming that the function changeBG() has loaded)

<body onLoad="changeBG(0)"> // javascript: not required

but what is the point? Why not simply set the body bgcolor:-

<BODY bgcolor="#E0FFE0" .... (or whatever).

s1980
09-02-2008, 04:13 PM
Because i need to apply this to 100s of micro sites (each site have a different theme)and i might change the colours in the future so it will be much easier to edit one JS file than to go back to 100s of pages.

by the way i tried it and still didn't work:

my bgColor.js consist of:

<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#FF0000';
backColor[1] = '#00FF00';
backColor[2] = '#0000FF';
backColor[3] = '#FFFFFF';
function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
</script>

my HTML page consist of:

<html>
<head>

<script type="text/javascript" src="bgColor.js" ></script>

</head>

<body>

<script>
window.onload = function()
{
changeBG(1);
}
</script>

</body>
</html>

Where could i have gone wrong?

Philip M
09-02-2008, 04:59 PM
my bgColor.js consist of:

<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#FF0000';
backColor[1] = '#00FF00';
backColor[2] = '#0000FF';
backColor[3] = '#FFFFFF';
function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
</script>

Where could i have gone wrong?

Delete the lines in red. You may not include HTML tags in a .js file.

Cranford
09-02-2008, 05:15 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bgColor.js"></script>
<script type="text/javascript">

onload = function(){document.body.style.backgroundColor = backColor[1];}

</script>
</head>
<body>

</body>
</html>

s1980
09-02-2008, 05:36 PM
YES. it worked

THANKS A MILLION. you guys are geniuses !

Alif
03-26-2010, 01:33 PM
I have used that script onload color changing function and onclick change bg color function in different html files. It works when they in different files. but I want to use these two in one file like when the page load one color have to load and when i am clicking the buttons the body color will be change. i try it but it doesn't work can u help for this script?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum