Changing inner text value of tab through javascript

Question

I'm learning Javascript right now, and attempting to change the text title of a particular tab. It's actually part of a larger Shiny dashboard project, but I want to add some custom functionality to a few tabs. Below are the tabs in question:

Simple enough. I first access my tabs in my Javascript file:

var tabScrub2 = $(document).find('[data-value="scrubTab2"]');

console.log(tabScrub2);

When I use Firefox's developer console, I see that the tab is an object:

Moreover, it looks like I need to change the

innerText

property of

0

, whatever this is, since that corresponds to the title of my tab (the

innerText

of

1

corresponds to the text inside

scrubTab2

). However, I'm not familiar with the actual object type being returned here:

Simply put, how the heck do I access and manipulate properties from this? And am I actually accessing an array? When I type in

var scrub2 = tabScrub2["1"];

console.log(scrub2);

I get an HTML element. I'm seen the

a

element in CSS and jQuery, but am not super familiar with how to manipulate its properties programmatically? How do I go about accessing and manipulating the

innerText

properties of this via Javascript? For instance, how would I hide

scrubTab2

, or change its title to something else?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Just use jQuery eq method to get the relevant object index from the array.

For an example

//Query and get first element.
var tabScrub2 = $(document).find('[data-value="scrubTab2"]:eq(0)');

//Hide
tabScrub2.hide();

//Change title
tabScrub2.attr("title", "New Title Text");

Lean more about jQuery eq here.
https://api.jquery.com/eq/

Since you use jquery selectors tabScrub2[0] returns the native DOM element instead of another jQuery object. Therefore the hide function won't work in that object since the native DOM element doesn't implement such type of functionality for an element. That's why you have to use jQuery pseudo selector as above. Because hide will only work with a jQuery object.

Changing inner text value of tab through javascript

Sign up