Hi everyone,
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
Here is the function openLinkNewWindow()
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:
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.
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:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] 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] = "[URL unfurl="true"]http://www.google.com"[/URL]
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="[URL unfurl="true"]http://www.google.com"[/URL] 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:
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:
nodeLink.onclick(openLinkNewWindow(links[i][0]));
Can any one please give me some advice?
Thank you in advance for your time.