title: Change Button Text jQuery
body: <p>I'm having a strange issue where I'm unable to change the displayed text of a button using jQuery.  The idea is to be able to toggle a field between password&lt;=>text, with an associated button whose text switches between 'Show' and 'Hide'.</p>
  
  <p>This is the button:</p>
  
  <pre><code>&lt;input type="button" id="login-form-showchars" value="Show" onclick="showCharsClicked();"/&gt;
  </code></pre>
  
  <p>And this is the showCharsClicked function:</p>
  
  <pre><code>function showCharsClicked() {
  var passwordField = document.getElementById("login-form-password");
  if (passwordField.type == "password") {
      passwordField.type = "text";
      //TODO: change text of button to 'Hide'
  } //if
  else {
      passwordField.type = "password";
      //TODO: change text of button to 'Show'
  } //else
  passwordField.value = value;
  } //showCharsClicked
  </code></pre>
  
  <p>The function works, but no matter what code I insert into the TODO areas, the text on the button remains unchanged.  I have tried ALL of the following with both 'input' and 'button' types:</p>
  
  <pre><code>document.getElementById('login-form-showchars').value = 'Hide';
  $("#login-form-showchars").prop('value', 'Hide');
  $("#login-form-showchars").html('Hide');
  $("#login-form-showchars").attr('value', 'Hide');
  $("#login-form-showchars").val('Hide');
  $("#login-form-showchars").text('Hide');
  </code></pre>
  
  <p>Does anyone know what might be going wrong?  By inspecting the button I see that its value IS changing, but this change is never reflected visually.</p>
  
  <p>Thanks!</p>
  
  <h1>====================================</h1>
  
  <p>EDIT: I found a way to get it working and thought I would record it here for posterity.  Thanks for all of your answers, I'm thinking now that the problem was caused because of the specific jQuery interface my program uses; that's why it worked for so many other people but not for me.</p>
  
  <p>The problem was that the program created some nested 'span' tags underneath the button in runtime, so that during the program's execution it looked like this:</p>
  
  <pre><code>&lt;a data-role="button" href="#" id="login-form-showchars" data-theme="v" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-v" data-transition="pop" data-direction="reverse"&gt;
    &lt;span class="ui-btn-inner ui-btn-corner-all"&gt;
       &lt;span class="ui-btn-text"&gt;Hide&lt;/span&gt;
    &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>While I was trying to edit the button's value, what really needed changing was the text inside the button's 'span class="ui-btn-text"' tag.</p>
  
  <p>I changed the button declaration to:</p>
  
  <pre><code>&lt;a data-role="button" href="#" id="login-form-showchars"&gt;Show&lt;/a&gt;
  </code></pre>
  
  <p>And the command inside the function to:</p>
  
  <pre><code>$("#login-form-showchars .ui-btn-text").text("Hide");
  </code></pre>
  
  <p>And this worked fine.  Hope this helps someone not have to go through what I did!</p>