I have this HTML code
<div class="form-actions">
<button type="submit" class="btn btn-success">I'm a button! Yayyy!</button>
</div>
I need to access that button in JS and click on it. And I cannot add an id to it, because it's on a webpage. (I'm using tampermonkey/greasemonkey btw)
This is quite easy to do using jQuery.
$('.btn.btn-success:contains("I\'m a button! Yayyy!")')
^ would be your button.
If there's no other buttons with this text, the solution can be narrowed down to:
$('button:contains("I\'m a button! Yayyy!")')
If there can be another buttons, containing this text, and you want to address the button, which exactly matches it, the solution would be
$(".btn.btn-success").each(function(){
if($(this).html()=="I'm a button! Yayyy!"){
//$(this) there is the button you want
}
})
You could select all the button elements on the page and then use the .filter() method to filter them based on their .textContent property:
var buttons = document.querySelectorAll('button');
var filteredButtons = Array.prototype.filter.call(buttons, function (el) {
return el.textContent.trim() === 'Find based on this text.';
});
// Click the first button
filteredButtons[0].click();
Of course in your case, you can select all the .btn-success elements that are descendants of elements with class .form-actions:
var buttons = document.querySelectorAll('.form-actions .btn-success[type="submit"]');
var filteredButtons = Array.prototype.filter.call(buttons, function (el) {
return el.textContent.trim() === 'Find based on this text.';
});
// Click the first button
filteredButtons[0].click();
$(".btn.btn-success" ).click();