Dynamic Unordered List?

davidfrank · 07-14-2007, 09:08 AM

Hi All,

I am fairly new to Javascript and I am in need of some help. I'm guessing that this question must be fairly easy to solve for many in this forum, but for me this is a big task. So kindly excuse me for this.

I have an Html page that has an unordered list. Each item in the list is a link to open a Javascript function. I would like to create a function that changes the item names as well as the values in this unordered list dynamically.

Here is the html code for the list:

<ul id="weblist">
<li><a onClick="getPage(link1)">First Page</a></li>
<li><a onClick="getPage(link2)">Second Page</a></li>
<li><a onClick="getPage(link3)">Third Page</a></li>
<li><a onClick="getPage(link4)">Fourth Page</a></li>
<li><a onClick="getPage(link5)">Fifth Page</a></li>
</ul>

I would like this list to become something like,

<ul id="weblist">
<li><a onClick="getPage(newlink1)">Home</a></li>
<li><a onClick="getPage(newlink2)">Sitemap</a></li>
<li><a onClick="getPage(newlink3)">Stuff</a></li>
<li><a onClick="getPage(newlink4)">Instructions</a></li>
<li><a onClick="getPage(newlink5)">Credits</a></li>
</ul>

This change must take place dynamically. That is, when I click a Master link, "All", the first list must be the bulleted list. When I click another Master link, "Sub", the second list must become the bulleted list.

Thank you very much for your time and efforts.

_Aerospace_Eng_ · 07-14-2007, 09:28 AM

This should get your started.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
var newlink = new Array();
newlink[0] = 'http://www.yahoo.com';
newlink[1] = 'http://www.google.com';
newlink[2] = 'http://www.hotmail.com';
newlink[3] = 'http://www.msn.com';
newlink[4] = 'http://codingforums.com';
function setLinks()
{
	
	var links = document.getElementById('weblist').getElementsByTagName('a');
	for(var i = 0; i < links.length; i++)
	{
		el = links[i];
		linkage = newlink[i];
		el.onclick = function()
		{
			getPage(linkage);			
		}
		alert(linkage);
	}
	return false;
}
function getPage(url)
{
	window.location = url;
}
</script>
</head>
<body>
<a href="#" onclick="return setLinks()">All</a>
<ul id="weblist">
	<li><a onClick="getPage(link1)" style="cursor:pointer;">First Page</a></li>
	<li><a onClick="getPage(link2)">Second Page</a></li>
	<li><a onClick="getPage(link3)">Third Page</a></li>
	<li><a onClick="getPage(link4)">Fourth Page</a></li>
	<li><a onClick="getPage(link5)">Fifth Page</a></li>
</ul>
</body>
</html>

davidfrank · 07-14-2007, 08:41 PM

Hi Aerospace Engineer,

Thank you for your code. The link now work great, thanks to you. But, I was wanting to have a function that also changes the names of the links.

That is, I also need:

First Page
Second Page
Third Page
Fourth Page
Fifth Page

to become:

Home
Sitemap
Stuff
Instructions
Credit

Is there a way I can get this to happen?

Thank you very much for your help. I truly appreciate it!

glenngv · 07-14-2007, 08:53 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
var newlink = new Array();
newlink[0] = ['http://www.yahoo.com', 'Yahoo'];
newlink[1] = ['http://www.google.com', 'Google'];
newlink[2] = ['http://www.hotmail.com', 'Hotmail'];
newlink[3] = ['http://www.msn.com', 'MSN'];
newlink[4] = ['http://codingforums.com', 'CodingForums'];
function setLinks()
{	
	var links = document.getElementById('weblist').getElementsByTagName('a');
	for(var i = 0; i < links.length; i++)
	{
		el = links[i];
		el.href = newlinks[i][0];
		el.innerHTML = newlinks[i][1];
	}
	return false;
}
</script>
</head>
<body>
<a href="#" onclick="return setLinks()">All</a>
<ul id="weblist">
	<li><a href="#">First Page</a></li>
	<li><a href="#">Second Page</a></li>
	<li><a href="#">Third Page</a></li>
	<li><a href="#">Fourth Page</a></li>
	<li><a href="#">Fifth Page</a></li>
</ul>
</body>
</html>

davidfrank · 07-15-2007, 04:53 AM

Hi Glenngv and Aerospace,

Thank you very very much for your help. I truly appreciate your efforts.

In the code, there's some kind of a weird problem now. I integrated both your codes in my project. The reason being that Aerospace's code has the onClick function, while Glenngv's code has the href function, and I cannot use href since I am submitting some form data. Hence, I HAVE to use the onClick function. So, I used Aerospace's code for the link addresses, and Glenngv's code for changing the link names (using innerHTML). The link names work fine. That is, the link names do change when I click the master link. But there is a problem with the link addresses. All the links point to the same location.

That is,

First Page, Second Page, Third Page, Fourth Page, and Fifth Page all point to "http://www.codingforums.com". I think there is something in the "for" loop that is causing this. I did try some stuff of my own to fix the "for" loop, but nothing worked. Would be great to get some help. Here is the code now:

Code:

<html>
<head>
<title> Just a Title!! </title>

<script type="text/javascript">

var link1 = "http://www.mywebsite.com/first.html"
var link2 = "http://www.mywebsite.com/second.html"
var link3 = "http://www.mywebsite.com/third.html"
var link4 = "http://www.mywebsite.com/fourth.html"
var link5 = "http://www.mywebsite.com/fifth.html"

function SwitchMenu(obj)
{
	return setLinks(); //Function to change the link names and addresses

       // Other javascript code to open and close the div menu

}

var newlink = new Array();
newlink[0] = 'http://www.yahoo.com';
newlink[1] = 'http://www.google.com';
newlink[2] = 'http://www.hotmail.com';
newlink[3] = 'http://www.msn.com';
newlink[4] = 'http://www.codingforums.com';

var linkname = new Array();
linkname[0] = 'Yahoo';
linkname[1] = 'Google';
linkname[2] = 'Hotmail';
linkname[3] = 'MSN';
linkname[4] = 'CodingForums';

function setLinks()
{
	var links = document.getElementById('weblist').getElementsByTagName('a');
	for(var i = 0; i < links.length; i++)
	{
		el = links[i];
		el.innerHTML = linknames[i];

		linkage = newlink[i];
		el.onClick = function()
		{
			getPage(linkage);			
		}
		//alert(linkage);
	}
	return false;
}

function getPage(linkaddress)
{
	/* Commented these out since they are not needed at the moment
	document.myform.action=linkaddress;
	document.myform.submit();
	*/

	window.location = linkaddress;

}

</script>

<body>

<a onClick = switchMenu('all')>ALL</a> //Master Link

<ul id="weblist">
<li><a onClick="getPage(link1)">First Page</a></li>
<li><a onClick="getPage(link2)">Second Page</a></li>
<li><a onClick="getPage(link3)">Third Page</a></li>
<li><a onClick="getPage(link4)">Fourth Page</a></li>
<li><a onClick="getPage(link5)">Fifth Page</a></li>
</ul>

</body>
</html>

davidfrank · 07-15-2007, 08:06 PM

Hi Coders,

I would love to get some help on my problem as stated above. I have everything ready in my project and this small issue is preventing me from giving my presentation tomorrow

I would very much appreciate it if anyone could give me a reply on this. Please excuse me for my haste in asking for a reply knowing that this is the weekend. It's just that I am in a very desperate situation.

This forum has been very helpful to me. Thank you all very much.

davidfrank · 07-16-2007, 08:55 AM

Hi,

Got it fixed....finally!!

Thank you all for your help. I truly appreciate it.

glenngv · 07-17-2007, 06:15 AM

Glad you fixed it yourself. But please post the solution for the sake of others who might have the same problem.

Just a question. Why did you create 2 separate arrays when you can have a single "2D" array as what I did?

davidfrank · 07-22-2007, 09:54 AM

Hi Glenn,

Sorry for the late response. I kinda stopped looking here after my problem got fixed.

Here is the code that fixed the problem:

Code:

<html>
<head>
<title>Dynamic Unordered List</title>

<script language="JavaScript" type="text/JavaScript">

var linkname = new Array();
linkname[0] = 'Yahoo';
linkname[1] = 'Google'
linkname[2] = 'MSN'
linkname[3] = 'CodingForums'

var linkaddress = new Array();
linkaddress[0] = "http://www.yahoo.com";
linkaddress[1] = "http://www.google.com";
linkaddress[2] = "http://www.msn.com";
linkaddress[3] = "http://www.codingforums.com";

function setLinks()
{
    var links = document.getElementById('weblist').getElementsByTagName('a');
    for(var i = 0; i < links.length; i++)
    {
	links[i].innerHTML = linkname[i]
    }
}

function getPage(linknum)
{
  var linkage
  linkage = linkaddress[linknum];
  document.formwithlinks.action = linkage;
  document.formwithlinks.submit();
}
</script>
</head>

<body>
<form name="formwithlinks" method="post">

<a onClick="setLinks()">Click here to change the List's Names & URLs</a>

<ul id="weblist">
<li><a onClick="getPage(0)">First Link</a></li>
<li><a onClick="getPage(1)">Second Link</a></li>
<li><a onClick="getPage(2)">Third Link</a></li>
<li><a onClick="getPage(3)">Fourth Link</a></li>
</ul>

</form>
</body>
</html>

Each link, instead of the usual "href" property, has an "onClick()" function to get the page pointed by the required link. The function sends a number, which is used to get the appropriate link address from the "linkaddress" array. That is why I had to use a single dimensional array opposed to the 2-D array that Glenn suggested. I know there are ways I could have still used the 2-D array, but I wanted things to be as simple as possible

.

Thank you all for your time and efforts. I truly appreciate the help I got from this posting.