Switch text to button tag

Question

I have a show hide rows rows function, but now I want to change my text.

<script language="javascript" type="text/javascript"> function HideStuff(thisname) { tr = document.getElementsByTagName('tr'); for (i = 0; i < tr.length; i++) { if (tr[i].getAttribute('classname') == 'display:none;') { if (tr[i].style.display == 'none' || tr[i].style.display=='block' ) { tr[i].style.display = ''; } else { tr[i].style.display = 'block'; } } } } 

html is as follows:

 <button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button> 

I want to switch the Show / Hide text. Any ideas?

Answer 1

Use jQuery how this might work:

 $('ShowHide').click(function(){ if ( $('hide').css('display') == 'block' ) $('ShowHide').val("Hide"); else $('ShowHide').val("Show"); }); 

I just wrote this from the top of my head, so maybe you will need to make some changes, you can learn more about css jquery api here . And all I did was use anonymous functions

Answer 2

 $('#HideShow').click(function() { if ($(this).text() == "Show") { $(this).text("Hide"); } else { $(this).text("Show"); }; }); 

Alternative, .toggle () has .toggle (even, odd); the functionality, use that ever makes the most sense to you is a bit shorter code, but perhaps less specific.

 $('#HideShow').toggle(function() { $(this).text("Hide"); HideClick('hide'); }, function() { $(this).text("Show"); HideClick('hide'); } ); 

NOTE. You can include any other actions that you want to use in function () as necessary, and you can remove onclick in markup / html by calling the HideClick () function call. as shown in the second example.

As a continuation and to introduce an alternative, you can add a CSS class to your CSS

 .hideStuff { display:none; } 

THEN add this to:

 .toggle('.hideStuff'); 

or, more directly: in the appropriate place.

 .addClass('.hideStuff'); .removeClass('.hideStuff'); 

Answer 3

I would recommend using jquery, but you can just use the javascript document.getElementById method

in your function:

 function HideStuff(thisname) { tr = document.getElementsByTagName('tr'); for (i = 0; i < tr.length; i++) { if (tr[i].getAttribute('classname') == 'display:none;') { if (tr[i].style.display == 'none' || tr[i].style.display == 'block') { tr[i].style.display = 'none'; } else { tr[i].style.display = 'block'; } } } if (document.getElementById("ShowHide").value == "show") { document.getElementById("ShowHide").value = "hide"; } else { document.getElementById("ShowHide").value = "show"; } } 

Although, I would probably go into this instead of the text 'hide' in the function call. then yon can do this as indicated by zaph0d. Then it is a little clean.

Answer 4

Not sure why you are passing this name to JS, as it is not currently in use.

If you change the call to:

 <button id="ShowHide" onclick="HideStuff(this)">Show</button> 

and then in js you can easily change the text:

 if (this.value == 'Show') { this.value = 'Hide' } else { this.value = 'Show'; }