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="/">Previous </a>				
	    <a href="/">Next</a>        
</div>

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/560339/1/">Previous </a>				
	    <a href="http://website/560339/2/">Next</a>        
</div>

Here is the Javascript what I have tried so far.

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

• javascript
• jquery
• html

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

8 Answers 8

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>

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

Alternatively you could filter using a CSS selector:

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

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>

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.

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

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); }

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/560339/1/>Previous</a>
 <a href="http://website/560339/2/">Next</a> 
</div>