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

Wastepaper

"This is the only element in the class" - okay, the only element with which class, you've listed two in the selector? – Kastroprauxel

in the rateRecipe class and btns-one-small – Wastepaper

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. – Totten

in your case - document.getElementsByClassName('rateRecipe btns-one-small')[0].click(); - should work . I usually do this it works. – Valparaiso

Answer 1

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:

• document.getElementsByClassName().
• document.querySelector().

Kastroprauxel

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. jsfiddle.net/u94wtpcn – Totten

Answer 2

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

Op

And loop is probably preferable to to [...document.querySelectorAll('.love-button.love-button--loved')].forEach(div => { div.click(); }), what do you think? – Goliath

@AS I think the proposed code is less performant but of course more beautiful with ES6. Will add it to the answer, thanks. – Op

Answer 3

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

Healthful

Answer 4

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.

Kirkendall