Dynamic Link highlighting

programming web dev
1

I am beginning to learn Javascript and I was beginning to feel comfortable enough to begin to write my own scripts. The first thing that I tried to approach was a script that will dynamically highlight a link depending on the page you are on. The way it should work is this.

the script reads the page title

the script then finds the link with the id “n-‘title’”

after it finds the id it then adds the class “active” to the link.

The style for the class active will then highlight the link for the page you are on. Pretty fun huh?

Well so far here is were I am with it.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test1</title>
<!-- Javascript -->
<script type="text/javascript" language="javascript">
	var pageTitle = document.getElementsByTagName ('title');
	var getLink =  'n-' + pageTitle;
	getLink.class = "active";
	
</script>

<!-- Page Styles -->
<style type="text/css" media="screen">
a {
	padding: 50px;
}

a:hover {
	background: black;
}

.active {
	background: black;
}

</style>
</head>

<body>
<a href="test1.html" title="test 1" id="n-test1">Test 1</a>
<a href="test2.html" title="test 2" id="n-test2">Test 2</a>
</body>
</html>

As of right now I cannot get this to run. I thought I had the script written correctly but I am still very new so I do not have an idea of what could be wrong. Any ideas?