通过类名单击带有JavaScript / Jquery的按钮/ href

Question

I'm trying to click a button that brings up an edit screen on the same page.

Eg. Click "edit user", edit screen pops up on the same page without redirecting, change name, save. This button does not redirect to a new page.

The code for this button is the following:

<a href="javascript:;" data-id="29508" class="btn btn-xs btn-inverse btn-modify"><i class="fa fa-pencil"></i> Edit</a>

For some reason I can click every other button on this website that's in the same exact form but I can't click this one. There are no IDs at all so calling by the class name is the only other method I know.

This is what I've tried:

setTimeout(function() {
   document.getElementsByClassName(" btn btn-xs btn-inverse btn-modify")[0].click();
}, 3000);

I tried using some Jquery instead as well but no luck. Am I doing something wrong or is this all that I can really do? The other buttons I clicked either redirected me to a different site or just brought up some information on the same screen.

Thanks in advance.

Edit:

It seems that when I try iterating through the different buttons, who all have similar starting class names, I can iterate and click every button except for the edit button. So it's safe to assume that this isn't an issue with the code, so thank you everyone for the help and suggestions.

Edit #2:

Here is the code for all three buttons:

 <div class="btn-group"><a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse"><i class="stm stm-goog"></i>&nbsp;&nbsp</a>

<a href="javascript:;" data-id="29508" class="btn btn-xs btn-inverse btn-modify"><i class="fa fa-pencil"></i> Edit</a>

<a href="javascript:;" data-page-modal="https://*randomwebsite*.com/manage/stats/301&amp;q=11" class="btn btn-xs btn-inverse"><i class="fa fa-bar-chart"></i></a><button type="submit" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i></button></div>

Answer 1

If you want to fetch the element having all the class, try this:

JQuery

$(".btn.btn-xs.btn-inverse.btn-modify")

Plain JavaScript

document.querySelectorAll(".btn.btn-xs.btn-inverse.btn-modify")

Giving a space in between a class names in a css like selector meant that (next one) is a nested element in any depth. use . to indicate its a class, and write them together (without a space ) you are searching for elements having all the lasses. And getElementsByClassName is not a css like selector, its can take only a class name and all those element having that class.

Answer 2

Because you are trying to select the element by its class you need to loop through the elements. So if you wanna use jQuery you would do like so:

$(".btn-modify").each(function(){

    $(this).click(function(){

    your code here

    });

});

Answer 3

When searching for elements by class, it's better to use:

document.querySelector();  // Finds first matching element only

and

document.querySelectorAll(); // Finds all matching elements

instead of document.getElementsByClassName() as this returns a "live node list" and hinder performance.

When searching for classes with these methods, remember to include the dot ( . ) to signify classes and when multiple classes are used, do not include spaces. The spaces are only used when setting multiple classes.

Also, if there is only one class that is unique to the element you wish to find, you only need to search on that one class.

Lastly, only use a elements for navigation. If you simply need something to click, just about any object can have a click event handler.

 var edit = document.querySelector(".btn-modify"); edit.addEventListener("click", function(){ console.log("clicked")}); setTimeout(function() { edit.click(); }, 3000); // Addtional test var edit = document.querySelectorAll(".btn.btn-xs.btn-inverse")[1]; edit.addEventListener("mouseover", function(){ console.log("moused over"); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="btn-group"> <a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse"> <i class="stm stm-goog">X</i>&nbsp;&nbsp; <!-- <-- You missed a semi-colon here. --> </a> <a href="#" data-id="29508" class="btn btn-xs btn-inverse btn-modify"> <i class="fa fa-pencil"></i> Edit </a> <a href="#" data-page-modal="https://*randomwebsite*.com/manage/stats/301&amp;q=11" class="btn btn-xs btn-inverse"> <i class="fa fa-bar-chart">X</i> </a> <button type="button" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i>TEST</button></div>