I'm quite new to JavaScript and I'm doing a little exercise and I'm stuck.
I need to create an XHTML page where I'll have a list of 5 links and then I need an external js file with a function to open the links in a new window.
Here is the code that I did so far
- Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!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>Final Assignment - JavaScript</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<script language="javascript" type="text/javascript">
<![CDATA[
var linksCreated = 0;
function createLinks(){
if ( linksCreated == 0){
//Create an Array whit two dimensions to hold the 5 links and the text for each link
var links = new Array(5);
for (var z = 0; z < 5; z++){
links[z] = new Array(2);
}
//Filing the Array with its value
links[0][0] = "adv_assignment_03.xhtml"
links[0][1] = "Assignment Week 3";
links[1][0] = "adv_assignment_04.xhtml"
links[1][1] = "Assignment Week 4";
links[2][0] = "adv_assignment_06.xhtml"
links[2][1] = "Assignment Week 6";
links[3][0] = "adv_assignment_07.xhtml"
links[3][1] = "Assignment Week 7";
links[4][0] = "http://www.google.com"
links[4][1] = "Google";
//Create an element ul (unordered list) that will hold the 5 elements list
var nodeUl = document.createElement("ul");
//Here we'll create the 5 element list which will contain the links to the page
for (var i = 0; i < 5; i++){
// Create the element li (list)
var nodeLi = document.createElement("li");
// Create the element a (link)
var nodeLink = document.createElement("a");
//Set the attribute href and give the value of the Array
nodeLink.setAttribute("href", links[i][0]);
// Create the text for the link with the Array
var linkText = document.createTextNode(links[i][1]);
nodeLink.appendChild(linkText);
nodeLi.appendChild(nodeLink);
nodeUl.appendChild(nodeLi);
document.getElementById("ul_div").appendChild(nodeUl);
//nodeLink.onclick(openLinkNewWindow(links[i][0]));
//nodeLink.onmouseover(openLinkNewWindow(links[i][0]));
}
linksCreated = 1;
}
}
//Create a unordered list
]]>
</script>
<script language="javascript" type="text/javascript" src="js/openurl.js"></script>
</head>
<body>
<!--If the javascript is disable then it will create the links -->
<noscript>
<ul>
<li><a href="adv_assignment_03.xhtml" target="_blank">Assignment Week 3</a></li>
<li><a href="adv_assignment_04.xhtml" target="_blank">Assignment Week 4</a></li>
<li><a href="adv_assignment_06.xhtml" target="_blank">Assignment Week 6</a></li>
<li><a href="adv_assignment_07.xhtml" target="_blank">Assignment Week 7</a></li>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
</ul>
</noscript>
<a href="#" onclick="createLinks(); return false;">Call Link</a>
<br />
<div id="ul_div">
</div>
</body>
</html>
Here is the function openLinkNewWindow()
- Code: Select all
function openLinkNewWindow(links){
var newWindow = window.open(links, "WriteOnWidnow", "width=700,height=550, resizable=yes,scrollbars=yes,toolbar=yes, menu=yes");
if(window.focus){
newWindow.focus();
}
}
So every thing works almost perfect, I said almost
...I create the elements with DOM and it works well but the problem is that I don't know which attribute I need to use to pass the link to the function which will open the page in a new window.
I tried to use this one:
- Code: Select all
nodeLink.onclick(openLinkNewWindow(links[i][0]));
But it didn't work, if I use it it will automatically open the first link in a new window without me have to click on the link.
Can any one please give me some advice?
Thank you in advance for your time.
