CODEWITHSUNDEEP
jquery
snert
snert

Reputation: 15

Get button element by its text

I'm working on a system that generates its web pages and I am limited in what I can do. I need to remove something from the screen or change its text. The system is custom written and I have zero control over the HTML that it produces. Consider the following:

<button class="spx_xfy1528128408146 spx_xfy-01528128408146 spx_xfy_type_11528128408146">Display Zone</button>

The button appears on a specific page. I can't give it an ID or anything. Using JQuery, is there a way to get this button and change "Display Zone" to "Show Area"? The numeric value in this case, 1528128408146, is random each time the page loads which makes this hard work. Can I get a reference to the button element by its inner text?

UPDATE Ok, so far I have this to get the reference but for some reason it gives me an error: $ is not defined

Why isn't it? I've included a ref to jquery and that didn't solve it.

// ==/UserScript==
// ...
// @require     http://code.jquery.com/jquery-latest.js
// ==/UserScript==

$(document).ready(function() {
   setTimeout(function() {
       var $buttons = $("button:contains('Display Zone')");
       $buttons.style.display = "none";}, 8000);});

Thanks.

Upvotes: 0

Views: 1566

Answers (2)

snert
snert

Reputation: 15

In the end for this I found the error was solved by adding this line of code to the javascript.

var $ = window.jQuery;

Upvotes: 0

Michael Beeson
Michael Beeson

Reputation: 2875

Look at how to use ":contains()"

https://api.jquery.com/contains-selector/

var $buttons = $("button:contains('Display Zone')");

EDIT

with regards to your edited code, the issue is with the line:

$buttons.style.display = "none";

I named the var $buttons for two reasons: the '$' indicates that this is a jQuery object and the "s" indicates that it's a collection.

When you use a jQuery selector, you get all elements which match that selector, and any subsequent functions (like .hide()) will be called on all those elements.

Your .style.display is code that would be used on an HTML element in vanilla javascript. To access the the first html element in a collection you can use .get()

https://api.jquery.com/get/

If you want to access it as a jQuery object use .eq()

https://api.jquery.com/eq/

So to set the button's display to none you can use:

$buttons.get(0).style.display = "none";

or you could use:

$buttons.hide();

Which is the jQuery way to achieve the same thing.

Upvotes: 2

Related Questions