View Full Version : onclick (do something) DOM

08-07-2008, 08:56 PM
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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Final Assignment - JavaScript</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
<script language="javascript" type="text/javascript">
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]);
linksCreated = 1;

//Create a unordered list
<script language="javascript" type="text/javascript" src="js/openurl.js"></script>

<!--If the javascript is disable then it will create the links -->
<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>

<a href="#" onclick="createLinks(); return false;">Call Link</a>
<br />
<div id="ul_div">


Here is the function openLinkNewWindow()

function openLinkNewWindow(links){
var newWindow = window.open(links, "WriteOnWidnow", "width=700,height=550, resizable=yes,scrollbars=yes,toolbar=yes, menu=yes");


So every thing works almost perfect, I said almost :P...
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.

08-07-2008, 09:04 PM
Instead use

if the target is "_Blank" it will open in a new window or tab depending on browser settings

08-08-2008, 06:40 AM
This shall do it:

nodeLink.onclick=function(){openLinkNewWindow(this.href);return false;};
// This is to assign a function onclick