Yu Chen Yu Chen - 3 years ago 178
Javascript Question

Changing inner text value of tab through javascript

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:

enter image description here

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:

enter image description here

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:

enter image description 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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download