Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Change background color in JavaScript using Arrays

    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!
    Last edited by s1980; 09-02-2008 at 12:49 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You have taken this from:-

    http://www.codebelly.com/javascript/...lorchange.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.

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I would like to apply the action without having to click on/move mouse over something. is it possible?

    Sorry about the title!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Well, something must trigger the change. What have you in mind?

    Thnak you for changing the thread title to something meaningful.

  • #5
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Should this work?

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

    Please bear in mind that JS function is in an external js file
    Last edited by s1980; 09-02-2008 at 02:13 PM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by s1980 View Post
    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).

  • #7
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by s1980 View Post
    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.

  • Users who have thanked Philip M for this post:

    s1980 (09-02-2008)

  • #9
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    Code:
    <!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>

  • Users who have thanked Cranford for this post:

    s1980 (09-02-2008)

  • #10
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    YES. it worked

    THANKS A MILLION. you guys are geniuses !

  • #11
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Want to change bgcolor when onload

    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •