Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onclick (do something) DOM

    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"
         "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:
    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.

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Instead use
    Code:
    nodeLink.setAttribute("target","_Blank");
    if the target is "_Blank" it will open in a new window or tab depending on browser settings

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    This shall do it:
    Code:
    nodeLink.onclick=function(){openLinkNewWindow(this.href);return false;}; 
    // This is to assign a function onclick
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •