Javascript Click on Element by Class

Question

So I am writing a script that can be run on a page but I want to click on this element, unfortunately, it does not have an id to get and I am trying to use the .click() function on it, but it doesn't work, here's what I have, anyone know how to fix it? This is the only element in the class also

var classes = document.getElementsByClassName('rateRecipe btns-one-small');
var Rate = classes[0];
Rate.click();

"*This is the only element in the class*" - okay, the only element with *which* class, you've listed *two* in the selector? — David Thomas, Aug 31 '14 at 00:01
When you have a question about DOM selection, you need to post the DOM you're selecting so that we can see what's wrong. Otherwise we're just guessing. — cookie monster, Aug 31 '14 at 01:06
in your case - document.getElementsByClassName('rateRecipe btns-one-small')[0].click(); - should work . I usually do this it works. — Ajit Hogade, Sep 27 '20 at 15:10

score 70 · Accepted Answer · answered Aug 30 '14 at 23:58

I'd suggest:

document.querySelector('.rateRecipe.btns-one-small').click();

The above code assumes that the given element has both of those classes; otherwise, if the space is meant to imply an ancestor-descendant relationship:

document.querySelector('.rateRecipe .btns-one-small').click();

The method getElementsByClassName() takes a single class-name (rather than document.querySelector()/document.querySelectorAll(), which take a CSS selector), and you passed two (presumably class-names) to the method.

References:

Just FYI, `getElementsByClassName` accepts multiple classes, so @user3010773's original code will work just fine if he was trying to select a single element that has both classes. http://jsfiddle.net/u94wtpcn/ — cookie monster, Aug 31 '14 at 01:03

Oleg Abrazhaev · Answer 2 · 2018-10-22T15:01:31.653

21

If you want to click on all elements selected by some class, you can use this example (used on last.fm on the Loved tracks page to Unlove all).

var divs = document.querySelectorAll('.love-button.love-button--loved'); 

for (i = 0; i < divs.length; ++i) {
  divs[i].click();
};

With ES6 and Babel (cannot be run in the browser console directly)

[...document.querySelectorAll('.love-button.love-button--loved')]
   .forEach(div => { div.click(); })

edited Oct 22 '18 at 15:01

answered Jul 06 '18 at 09:48

Oleg Abrazhaev

2,751
2
28
41

1

And loop is probably preferable to to `[...document.querySelectorAll('.love-button.love-button--loved')].forEach(div => { div.click(); })`, what do you think? – A S Oct 21 '18 at 06:57
1

@AS I think the proposed code is less performant but of course more beautiful with ES6. Will add it to the answer, thanks. – Oleg Abrazhaev Oct 22 '18 at 15:00

score 7 · Answer 3 · answered Oct 29 '21 at 07:46

for exactly what you want (if you know the index of button):

var rate = document.getElementsByClassName('rateRecipe btns-one-small')[0];
rate.click();

or for direct action

document.getElementsByClassName('rateRecipe btns-one-small')[0].click();

with jQuery

$('.rateRecipe .btns-one-small').click(function(){
    var vIndex = $('.rateRecipe .btns-one-small').index(this);
    //vIndex is the index of buttons out of multiple
    
    //do whatever 
    //alert($(this).val());//for value
});

score 0 · Answer 4 · answered Jul 23 '18 at 02:08

class of my button is "input-addon btn btn-default fileinput-exists"

below code helped me

document.querySelector('.input-addon.btn.btn-default.fileinput-exists').click();

but I want to click second button, I have two buttons in my screen so I used querySelectorAll

var elem = document.querySelectorAll('.input-addon.btn.btn-default.fileinput-exists');
                elem[1].click();

here elem[1] is the second button object that I want to click.

Javascript Click on Element by Class

4 Answers4

Linked