How to click on a link using javascript

Question

I'm trying to click on next link on a html page but having difficulties.

I have to get elementbyclassname of the main div and clicking on the second element of the div, here is the HTML of page i want to click:

<div class="next-previous">
            <a href="http://website.net/560339/1/">Previous </a>				
	    <a href="http://website.net/560339/2/">Next</a>        
</div>

Here is the Javascript what I have tried so far.

var nextlink = document.getElementsByClassName('next-previous');
nextlink[0].click();

Doesn't this click on the <div> instead of the children <a>s? Do a .children[0] to get the top anchor. — Huey
– Huey, Commented Jun 28, 2015 at 9:55
That's still not working. var nextlink = document.getElementsByClassName('next-previous'); nextlink.children[0].click(); — CodyMan
– CodyMan, Commented Jun 28, 2015 at 9:59

Siguza · Accepted Answer · 2015-06-28 10:05:36Z

6

You're clicking on the div, which has no effect. You need to click on the a.
Replace nextlink[0].click() with nextlink[0].lastElementChild.click() and it should work.

Demo (replaced link targets with alerts):

var nextlink = document.getElementsByClassName('next-previous');
nextlink[0].lastElementChild.click();

<div class="next-previous">
    <a href="javascript:alert('Previous')">Previous </a>				
    <a href="javascript:alert('Next')">Next</a>        
</div>

edited Jun 28, 2015 at 10:05

answered Jun 28, 2015 at 9:56

Siguza

24.7k6 gold badges58 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

CodyMan Over a year ago

Still no click performed.

Siguza Over a year ago

@CodyMan I find that hard to believe. I added a snippet, please try that.

Tushar Gupta Over a year ago

U plagerized my answer, please never do that ....or provide some attribution... I am waiting for your edit attribute the ansewr

CodingIntrigue Over a year ago

@TusharGupta Wouldn't plagiarism imply that your answer would be the same as this? When it's not. Difference is the addition of lastElementChild. And that this works

Tushar Gupta Over a year ago

@RGraham You can check the time of the answer and edit compare them

|

Huey · Accepted Answer · 2015-06-28 10:03:59Z

2

I'm confused. Your question is tagged as jQuery, but you're using Vanilla.JS.

Anyhow:

jQuery:

$("div.next-previous>a:nth-of-type(2)").click()
// clicks on second <a>

Vanilla.JS

document.getElementsByClassName('next-previous')[0].children[1].click()
//does the same
//gets an array of elements with the class 'next-previous', takes the first, then takes the second child and clicks on it

edited Jun 28, 2015 at 10:03

answered Jun 28, 2015 at 10:01

Huey

5,2206 gold badges36 silver badges45 bronze badges

3 Comments

Siguza Over a year ago

children[0] would be the "Previous" link, not the "Next" one.

Huey Over a year ago

Right, sorry, didn't realise he was trying to click on the Next one.

CodyMan Over a year ago

exactly! the above code is clicking on previous, by the way when I'm on the first page the previous link isn't available so I need to use something like last child.

Jaromanda X · Accepted Answer · 2015-06-28 10:15:03Z

2

Alternatively you could filter using a CSS selector:

document.body.querySelector(".next-previous a:nth-child(2)").click();

edited Jun 28, 2015 at 10:15

user1636522

answered Jun 28, 2015 at 10:07

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Comments

user1636522 · Accepted Answer · 2015-06-28 10:08:52Z

1

My humble contribution, blind shot though since your question is not clear:

var clsA = document.querySelectorAll('.cls > a');
clsA[0].addEventListener('click', function (ev) {
    var span;
    ev.preventDefault();
    span = document.createElement('span');
    span.textContent = ' allo';
    this.parentNode.appendChild(span);
});

<div class="cls">
    <a href="#">here</a>
</div>

answered Jun 28, 2015 at 10:08

user1636522

Comments

Pralhad Narsinh Sonar · Accepted Answer · 2015-06-28 10:09:22Z

1

You may use

$('.next-previous a').trigger('click');

Or even this would work

$('.next-previous').find('a').trigger('click');

As I see you have multiple <a> tags within the <div> so I suggest to apply unique class or id to each <a> tag. This way it will be easier to refer the links in js/jquery otherwise you will need to use ElementChild attributes.

edited Jun 28, 2015 at 10:09

answered Jun 28, 2015 at 10:03

Pralhad Narsinh Sonar

1,4541 gold badge14 silver badges23 bronze badges

Comments

Md Atiqul Haque · Accepted Answer · 2015-06-28 10:20:54Z

1

Flow this blog post.I think it will help you to understand why anchor does not click by javascript. http://blog.stchur.com/2010/01/15/programmatically-clicking-a-link-in-javascript/

answered Jun 28, 2015 at 10:20

Md Atiqul Haque

1143 bronze badges

1 Comment

Zeek2 Over a year ago

Unfortunately, your link is now bad :( Any chance of a good link?

Murugan · Accepted Answer · 2023-11-17 07:40:21Z

1

window.location.href and hyperlink click using JavaScript or trigger using jQuery not working in latest version of browser's like Microsoft Edge and Chrome. Works well in Edge and Chrome function link_Click() { setTimeout(function(){document.location.href = "page.html;"},1); }

edited Nov 17, 2023 at 7:40

answered Nov 17, 2023 at 7:32

Murugan

112 bronze badges

Comments

ozil · Accepted Answer · 2015-06-28 10:10:14Z

0

you need to use :nth-child() to get desired child. like

var nextlink = document.document.querySelectorAll('.next-previous:nth-child(2)').click();   // click the second link

var nextlink = document.document.querySelectorAll('.next-previous:nth-child(2)').click();

<div class="next-previous"> <a href="http://website.net/560339/1/>Previous</a>
 <a href="http://website.net/560339/2/">Next</a> 
</div>

answered Jun 28, 2015 at 10:10

ozil

7,1639 gold badges38 silver badges62 bronze badges

Collectives™ on Stack Overflow

How to click on a link using javascript

8 Answers 8

9 Comments

jQuery:

Vanilla.JS

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

9 Comments

jQuery:

Vanilla.JS

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related