Dynamic hyperlink with javascript

[dRgonZo279]

Hi,

I'm currently trying to create 4 hyperlinks that will update at the start of each week with the links leading to the apropriate documents for that week. I have a javascript script that returns the date of the start of the current week and then the date of the next 4 weeks starting from Monday of each. My question is how do I get this text to display as a link in html based on my javascript code?

<script type="text/javascript">


//Set up date variables

var today =new Date();
var last_monday =new Date();


//Set up array variable and populate

var weekday=new Array(7);

weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";

var date_string

//Set up array variable for week commencing

var week_commencing=new Array(4);

week_commencing[0]="Sunday";
week_commencing[1]="Monday";
week_commencing[2]="Tuesday";
week_commencing[3]="Wednesday";
week_commencing[4]="Wednesday";



//Determine when last monday was

switch(today.getDay())
{
case 0:

last_monday = new Date(today.getFullYear(), today.getMonth(), today.getDate()-6);
break;
case 2:

last_monday = new Date(today.getFullYear(), today.getMonth(), today.getDate()-1);
break;
case 3:

last_monday = new Date(today.getFullYear(), today.getMonth(), today.getDate()-2);
break;
case 4:
last_monday = new Date(today.getFullYear(), today.getMonth(), today.getDate()-3);
break;
case 5:

last_monday = new Date(today.getFullYear(), today.getMonth(), today.getDate()-4);
break;
case 6:

last_monday = new Date(today.getFullYear(), today.getMonth(), today.getDate()-5);
break;

default:

last_monday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
break;
}



//Once we have last monday we can determine the next four mondays

var last_monday_plus07 =new Date(last_monday.getFullYear(), last_monday.getMonth(), last_monday.getDate()+7);
var last_monday_plus14 =new Date(last_monday.getFullYear(), last_monday.getMonth(), last_monday.getDate()+14);
var last_monday_plus21 =new Date(last_monday.getFullYear(), last_monday.getMonth(), last_monday.getDate()+21);
var last_monday_plus28 =new Date(last_monday.getFullYear(), last_monday.getMonth(), last_monday.getDate()+28);



//Parse last monday into DD MM YYYY

var curr_date = last_monday.getDate();
var curr_month = last_monday.getMonth();
curr_month = curr_month + 1;
var curr_year = last_monday.getFullYear();

date_string = curr_date + '/'+ curr_month + '/'+ curr_year

week_commencing[0]=date_string;

//document.writeln("Last Monday =: " + date_string);

document.writeln("High Court First Instance - Rolls of Court - Week Commencing: " + week_commencing[0]);

//Parse last monday + 07 into DD MM YYYY

var curr_date = last_monday_plus07.getDate();
var curr_month = last_monday_plus07.getMonth();
curr_month = curr_month + 1;
var curr_year = last_monday_plus07.getFullYear();

date_string = curr_date + '/'+ curr_month + '/'+ curr_year

week_commencing[1]=date_string;

//document.writeln("Last Monday 07 =: " + date_string);

document.writeln("High Court First Instance - Rolls of Court - Week Commencing: " + week_commencing[1]);


//Parse last monday + 14 into DD MM YYYY

var curr_date = last_monday_plus14.getDate();
var curr_month = last_monday_plus14.getMonth();
curr_month = curr_month + 1;
var curr_year = last_monday_plus14.getFullYear();

date_string = curr_date + '/'+ curr_month + '/'+ curr_year

week_commencing[2]=date_string;

//document.writeln("Last Monday 14 =: " + date_string);

document.writeln("High Court First Instance - Rolls of Court - Week Commencing: " + week_commencing[2]);


//Parse last monday + 21 into DD MM YYYY

var curr_date = last_monday_plus21.getDate();
var curr_month = last_monday_plus21.getMonth();
curr_month = curr_month + 1;
var curr_year = last_monday_plus21.getFullYear();

date_string = curr_date + '/'+ curr_month + '/'+ curr_year

week_commencing[3]=date_string;

//document.writeln("Last Monday 21 =: " + date_string);

document.writeln("High Court First Instance - Rolls of Court - Week Commencing: " + week_commencing[3]); //try document.getElementById in the morning


//Parse last monday + 28 into DD MM YYYY

var curr_date = last_monday_plus28.getDate();
var curr_month = last_monday_plus28.getMonth();
curr_month = curr_month + 1;
var curr_year = last_monday_plus28.getFullYear();

date_string = curr_date + '/'+ curr_month + '/'+ curr_year

week_commencing[4]=date_string;

//document.writeln("Last Monday 28 =: " + date_string);

document.writeln("High Court First Instance - Rolls of Court - Week Commencing: " + week_commencing[4]);








</script>

Ideally the link would look like the text written in each document.writeIn section of the javascript code.

Hope this makes sense. Thanks in advance.

[DanInMA]

you would probably be ok using innerHTML if it's jsut some simple links.
http://www.tizag.com/javascriptT/jav...-innerHTML.php

[DanInMA]

document.getElementById('mytestdiv').innerHTML = "High Court First Instance - Rolls of Court - Week Commencing: " + week_commencing[4];

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Dates(id){
 var obj=document.getElementById(id),monday=[new Date()],z0=0,z1=0,as=obj.getElementsByTagName('A');;
 while (monday[0].getDay()!=1){
  monday[0]=new Date(monday[0].getFullYear(),monday[0].getMonth(),monday[0].getDate()-1);
 }
 for (;z0<4;z0++){
  monday[z0+1]=new Date(monday[z0].getFullYear(),monday[z0].getMonth(),monday[z0].getDate()+7);
 }
 for (;z1<5;z1++){
  monday[z1]=Format(monday[z1].getDate())+'/'+Format(monday[z1].getMonth()+1)+'/'+monday[z1].getFullYear();
  if (as[z1]){
   as[z1].innerHTML='High Court First Instance - Rolls of Court - Week Commencing: '+monday[z1];
   as[z1].href='http://www.myURL/'+monday[z1].replace(/\D/g,'')+'.htm'; //http://www.myURL/26092011.htm
  }
 }
}

function Format(nu){
 return nu>9?nu:'0'+nu;
}


/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 Dates('tst');
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>
</head>

<body>

<div id="tst">
<a></a><br />
<a></a><br />
<a></a><br />
<a></a><br />
<a></a><br />
</div>

</body>

</html>

[Fairview]

dRgonZo279:

This code creates a list of date links for each Monday, organized by month, in a 3 x 4 grid, through the current date.

The links are to .pdf documents. Adapt the code to suit.

A screen shot is attached.

	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	function init(){
		
		var pdfPath = "/pdfDocs/";
		var nDomain = "http://www.somedomain.com";

		/* Do not edit below this line */

		var today = new Date();
		var nDiv = document.getElementsByTagName('div');
		for (i=0; i<nDiv.length; i++)
			{
			 if (nDiv[i].className == "pdf_month_box_container")
				{
			 	 var nMonthContainer = nDiv[i];
				}
			}
		var pdfMonthBox = [];
		var pdfListContainer = [];
		var nMonthBox = "";
		var nMonthTitle = "";
		var nPdfListContainer = "";
		var nMonthName = ["January","February","March",
				  "April","May","June",
				  "July","August","September",
				  "October","November","December"];
		for (i=0; i<12; i++)
			{
			 nMonthBox = document.createElement('div');
			 pdfMonthBox[pdfMonthBox.length] = nMonthBox;
			 nMonthBox.className = "pdf_month_box";
			 nMonthTitle = document.createElement('div');
			 nMonthTitle.appendChild(document.createTextNode(nMonthName[i]))
			 nMonthTitle.className = "pdf_month_box_title";
		         nMonthBox.appendChild(nMonthTitle);
			 nPdfListContainer = document.createElement('div');
			 pdfListContainer[pdfListContainer.length] = nPdfListContainer;
			 nPdfListContainer.className = "pdf_list";
			 nMonthBox.appendChild(nPdfListContainer);			 
			 nMonthContainer.appendChild(nMonthBox);			 
			}
		var currMonth = today.getMonth();
		var refDate = "";
		var nEOM = "";
		var testMonday = "";
		var nLink = "";
		var dateStr = "";
		for (i=0; i<currMonth; i++)
			{
			 refDate = new Date(today.getFullYear(),i,1);
			 nEOM = new Date(refDate.getFullYear(),refDate.getMonth()+1,refDate.getDate()-refDate.getDate()).getDate();
			 for (n=0; n<nEOM; n++)
				{
				 testMonday = new Date(today.getFullYear(),i,n+1).getDay();
				 if (testMonday == 1)
				 	{
					 dateStr = (i+1) + "-" + (n+1) + "-" + refDate.getFullYear();
					 dateStr = dateStr.replace(/^([^0]\-)/, "0$1").replace(/(\-)([^0]\-)/, "$10$2"); 
					 nLink = document.createElement('a');
				 	 nLink.href = pdfPath + dateStr + ".pdf";
				 	 nLink.appendChild(document.createTextNode(dateStr));
				 	 pdfListContainer[i].appendChild(nLink);
					}
				}
			}
		nEOM = new Date(today.getFullYear(),today.getMonth()+1,today.getDate()-today.getDate()).getDate();
		for (i=0; i<nEOM; i++)
			{
			 testMonday = new Date(today.getFullYear(),today.getMonth(),i+1);
			 if (today.getDate() > testMonday.getDate())
				{
				 if (testMonday.getDay() == 1)
			 		{
				 	 dateStr = (currMonth + 1) + "-" + (i+1) + "-" + today.getFullYear();
				 	 dateStr = dateStr.replace(/^([^0]\-)/, "0$1").replace(/(\-)([^0]\-)/, "$10$2"); 
				 	 nLink = document.createElement('a');
			 	 	 nLink.href = pdfPath + dateStr + ".pdf";
			 	 	 nLink.appendChild(document.createTextNode(dateStr));
			 	 	 pdfListContainer[currMonth].appendChild(nLink);	
					}			
				}
			}	
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #fffacd; margin-top: 60px;}	

	.pdf_month_box_container {width: 303px; height: 439px; margin-left: auto; margin-right: auto;
				  background-color: #f0fff0; border-top: 1px solid black; 
				  border-left: 1px solid black;}

	.pdf_month_box_container_title {float: left; width: 302px; height: 23px; font-family: veranda; font-size: 13pt;
					font-weight: bold; text-align: center; color: white; background-color: #191970;
					border-right: 1px solid black;}

	.pdf_month_box {float: left; width: 100px; height: 103px; border-right: 1px solid black;
			border-bottom: 1px solid black;}

	.pdf_month_box_title {float: left; width: 100&#37;; height: 17px; font-family: arial; font-size: 9pt; 
			      font-weight: bold; letter-spacing: 1px; background-color: #b0e0e6; text-align: center;}

	.pdf_list {float: left; width: 100%; height: 90px; font-family: arial; font-size: 8pt; text-align: center; 
		   overflow: hidden;}

	.pdf_list a {display: block; text-decoration: none; color: blue; margin-top: 3px;}	

</style>
</head>
	<body>
		<div class="pdf_month_box_container">
			<div class="pdf_month_box_container_title">Currently Available .pdf Documents</div>
		</div>
	</body>
</html>

[dRgonZo279]

Thanks for the replies guys. Very helpful