Original page redirects while new window is blank when using Window.Open

Question

I've created a function and am calling it but it doesn't seem to work. A new window opens, but it ends up blank and the original page is the one that is redirected to where the new window is supposed to.

Here is my script:

 var bikeWindow;
         function showBike(linkTarget) {
             bikeWindow = window.open(linkTarget, "bikeInfo", "toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no,width=620,height=575");
             bikeWindow.focus();
         }

Here is my function call:

a href="cannondale.html"  onclick="return showBike();"

Any tips? Thank you.

Answer 1

Your problem is that your function expects a targetLink variable as parameter to be used as redirection url, you need to pass the link href to your function, using this.href .

This is how should be your code:

JavaScript:

var bikeWindow;

function showBike(event, linkTarget) {
  event.preventDefault();
  bikeWindow = window.open(linkTarget, "bikeInfo", "toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no,width=620,height=575");
  bikeWindow.focus();
}

HTML:

<a href="cannondale.html" onclick="showBike(event, this.href);">Link</a>

Note:

The return keyword before your function call is useless in the link click event.

Edit:

By using this.href on the link we are passing the href attribute value to our function: where this refers to the <a> link itself.