Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HELP onclick (do something) DOM

Status
Not open for further replies.

freeman76

Technical User
Aug 7, 2008
1
CA
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

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 :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:
Code:
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.
 
Try researching some of the results of the following google search and let us know how you get on:
[google]javascript assign onclick with parameters[/google]

Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top