Coding Forum

**Creaton** · 05:24 PM

I've been working on JavaScript over the summer, trying to learn it. I've been making some simple programs to further my understanding. I made this calendar program, and I'm trying to make a different part light up based on the day that it is. I'd appreciate if someone could tell me why my code isn't working, I can't figure it out.

Here's the code:

HTML Code:

<html>
   <head>
      <title>
         Calendar Script
      </title>
 
<script language="javascript">


// light up whichever cell today's date is
// why dosen't this work???
function lightUp(celldate)
{
	var date = new Date()
	var day = date.getDate()


	if (celldate == day) {
		alert("if")
		document.getElementById(celldate).innerHtml =
		'<td ' +
		'width=14.2% ' +
		'bgcolor="yellow" ' +
		'> '
	}
	else {
		document.getElementById(celldate).innerHtml =
		'<td ' +
		'width=14.2% ' +
		'> '
		alert("else")
	}


}


</script>
 </head>

   <body


<font color=#FFFF10>
      <table cellspacing="0" cellpadding="4" border="1" width="80%" bgcolor="blue">

   <tr height=40>
      <td width=14.2%>
         <b>Monday</b>
      </td>
      <td width=14.2%>
         <b>Tuesday</b>
      </td>
      <td width=14.2%>
         <b>Wednesday</b>
      </td>
      <td width=14.2%>
         <b>Thursday</b>
      </td>
      <td width=14.2%>
         <b>Friday</b>
      </td>
      <td width=14.2%>
         <b>Saturday</b>
      </td>
      <td width=14.2%>
         <b>Sunday</b>
      </td>
   </tr>
   <tr valign=top>
      <td width=14.2%>
      &nbsp;
      </td>
      <td width=14.2%>
      &nbsp;
      </td>
      <div id=1>
       1
      </td>
      <div id=2>
         2
      </td>
      <div id=3>
         3
      </td>
      <div id=4>
         4
      </td>
      <div id=5>
         5
      </td>
   </tr>
   <tr valign=top>
      <div id=6>
         6
      </td>
      <div id=7>
         7
      </td>
      <div id=8>
         8
      </td>
      <div id=9>
         9
      </td>
      <div id=10>
         10
      </td>
      <div id=11>
         11
      </td>
      <div id=12>
         12
      </td>
   </tr>
   <tr valign=top>
      <div id=13>
         13
      </td>
      <div id=14>
         14
      </td>
      <div id=15>
         15
      </td>
      <div id=16>
         16
      </td>
      <div id=17>
         17
      </td>
      <div id=18>
         18
      </td>
      <div id=19>
         19
      </td>
   </tr>
   <tr valign=top>
      <div id=20>
         20
      </td>
      <div id=21>
         21
      </td>
      <div id=22>
         22
      </td>
      <div id=23>
         23
      </td>
      <div id=24>
         24
      </td>
      <div id=25>
         25
      </td>
      <div id=26>
         26
      </td>
   </tr>
   <tr valign=top>
      <div id=27>
         27
      </td>
      <div id=28>
         28
      </td>
      <div id=29>
         29
      </td>
      <div id=30>
         30
      </td>
      <div id=31>
         31
      </td>
      <td width=14.2%>
         &nbsp;
      </td>
      <td width=14.2%>
         &nbsp;
      </td>
   </tr>
</table>

</font>

   </body>

</html>

**webwoRRks** · 08-22-2004, 04:25 PM

umm... Wheres your lightUp function called from? You have to call a function for it to work....

**Christopher** · 08-22-2004, 04:29 PM

Creaton, it would help if you used code tags to format your code. It's hard to read without any indentation.

**Creaton** · 05:25 PM

srry forgot to inclue the call. To test I was calling it in the body with <body onload=lightUp(22)> - just to use today's date, but that wouldn't do anything.

Later I was going to put a for loop in, so that it would call 31 times, one for each div tag.

I'm just looking for how to actually light up the box, then I'll working on calling it (unless someone could help me with that?).

**webwoRRks** · 08-22-2004, 05:49 PM

You open with div, and close with td....
OK, start again. Do it all either TD's or DIV's, and assign each an id, and a style or class, with a default background colour. Then, when you want to highlight one, just do [itemID].style.backgroundColor="#CCFFEE"; Or some such thing. Far cleaner