CODEWITHSUNDEEP
javascripthtmlbuttonhyperlinknavigation
Nathan Wilson
Nathan Wilson

Reputation: 179

Opening a new tab on button click

I am wanting to create a link using a button that opens in a new tab.

The code I am using at the moment is currently opening a blank tab, and I'm unsure as to why.

<div class="text text-left">

    <h2>WORK</h2>
    <h1>Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque felis ante, eu convallis sem egestas id.</p>

    <p>Etiam fermentum vestibulum hendrerit. Nam ac felis dolor ultricies varius eget vel arcu.</p>

    <button href="https://www.behance.net" onclick="window.open(this.href); return false;">View Project</button>

</div>

The expected result would be to open a new tab (Behance.com) once the button is clicked - Not a blank tab.

Thanks.

Upvotes: 0

Views: 4081

Answers (5)

NullDev
NullDev

Reputation: 7303

this.href is invalid. Use this.getAttribute('href')

JSFiddle Demo

However, while this answers your question, this is not good practice.
As @Sami Ahmed Siddiqui pointed out, href is not a valid attribute of the button element.
Instead you could use a data-* attribute such as data-href.

Upvotes: 1

bharath s
bharath s

Reputation: 1

<div class="text text-left">

    <h2>WORK</h2>
    <h1>Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque felis ante, eu convallis sem egestas id.</p>

    <p>Etiam fermentum vestibulum hendrerit. Nam ac felis dolor ultricies varius eget vel arcu.</p>

    <button href="https://www.behance.net" onclick="window.open(this.getAttribute('href'),'_blank')" >View Project</button>

</div>

Upvotes: -1

Sami Ahmed Siddiqui
Sami Ahmed Siddiqui

Reputation: 2386

Attribute href not allowed on element button instead of adding href just use data-href in HTML and in JavaScript just change this.href to this.getAttribute('data-href') as shown below:

<div class="text text-left">

    <h2>WORK</h2>
    <h1>Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque felis ante, eu convallis sem egestas id.</p>

    <p>Etiam fermentum vestibulum hendrerit. Nam ac felis dolor ultricies varius eget vel arcu.</p>

    <button data-href="https://www.behance.net" onclick="window.open(this.getAttribute('data-href')); return false;">View Project</button>

</div>

Directly running the code will not work for you due to blocked permission. You may try this in your own project.

Upvotes: 1

Mohan
Mohan

Reputation: 84

Use

<a href="https://www.behance.net" target="_new" onclick="window.open(this.href); return false;">View Project</a>

Upvotes: 0

Alexander Lallier
Alexander Lallier

Reputation: 495

The first thing I like to do when debugging something like this is console.log this.href, since you aren't getting what you expect. All signs of problem here point to this.href. If you do this you will see that it gives you undefined.

What you are looking for is window.location.href. Update your onclick to reflect this.

https://developer.mozilla.org/en-US/docs/Web/API/Window/location

Upvotes: 1

Related Questions