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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing the table background after page loads using JavaScript

    I'm trying to make a page with two tables. The top table's background is randomly chosen from a list (I've only created the random function for that). Unfortunately, the TABLE tag has no NAME. So, is there any way that I can use this random function to manipulate the table background? If not, please give me some guidance.

    Cheers.
    -Alan

  • #2
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think u r having trouble with changing the background of a table when your page is finished loading. Try this:

    Code:
    <head>
    <script language="javascript">
    <!--
    function changeColor(){
    document.getElementById('thetable').style.backgroundColor = "darkblue";
    }
    //-->
    </script>
    <body onload="changeColor();">
    <table id="thetable">
    <tr><td>something</td></tr>
    </table>

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that helps quite a bit. I modified it a little bit so that it would be random... but the line that makes all the difference doesn't work.

    Code:
    <HTML>
    <HEAD>
    <TITLE>Man's Thing</TITLE>
    
    <SCRIPT LANGUAGE="JavaScript">
    
    var background = new Array(maxElements);
    var maxElements = 5;
    var num=0;
    
    for (i=0; i<=maxElements; i++)
    {
    	background[i] = new Image();
    	background[i].src = "bg" + (i+1) + ".gif";
    }
    
    function changeBackground()
    {
    	var randNumber = Math.round(Math.random()*maxElements);
    	num = randNumber;	
    	document.getElementById('thetable').style.background.src = background[num].src;
    }
    
    </SCRIPT>
    
    </HEAD>
    
    <BODY onLoad="changeBackground();" TOPMARGIN=0 LEFTMARGIN=0>
    
    <TABLE ID="thetable" WIDTH=100% HEIGHT=200 BORDER=1 CELLPADDING=0 CELLSPACING=0>
    <TR><TD>something</TD></TR>
    </TABLE>
    
    </BODY>
    </HTML>
    The getElementById line isn't causing the background to change. This assumes that I have maxElements number of images. Any help would be welcome.

    Cheers.
    -Alan

  • #4
    New Coder
    Join Date
    Sep 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I havent done javascript in forever, and even when i did i wasn't very good with it.

    But i program in other languages and in all of them you have to declare variables before you use them...is that different in javascript?

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have declared all the variables... as far as I know.

  • #6
    New Coder
    Join Date
    Sep 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You did declare them...

    I was just asking (mind you, i'm a newbie to javascript) would it be a problem if you set your array equil to a variable that hasn't been declared yet?

    maxElements was declared after your array, but your array was declared as maxElements in size.

    I didn't know if the browser goes and finds maxElements or not when its not defined.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    for (i=0; i<maxElements; i++)
    {
    	background[i] = new Image();
    	background[i].src = "bg" + (i+1) + ".gif";
    }
    
    function changeBackground()
    {
    	var randNumber = Math.floor(Math.random()*maxElements);
    	document.getElementById('thetable').style.background = "url("+background[randNumber].src+")";
    }


  •  

    Posting Permissions

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