Change Button Text jQuery

Question

У меня возникла странная проблема, когда я не могу изменить отображаемый текст кнопки с помощью jQuery. Идея состоит в том, чтобы иметь возможность переключать поле между паролем < => текст, с ассоциированной кнопкой, текст которой переключается между «Показать» и «Скрыть».

Это кнопка:

<input type="button" id="login-form-showchars" value="Show" onclick="showCharsClicked();"/> 

И это не является showCharsClicked функция:

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 

Функция работает, но независимо от того, какой код вставить в областях TODO, текст на кнопка остается неизменной. Я попробовал все из следующих действий как с «входом» и «кнопки» типа:

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'); 

Кто-нибудь знает, что может быть неправильно? Проверяя кнопку, я вижу, что ее значение меняется, но это изменение никогда не отображается визуально.

Спасибо!

====================================

EDIT: Я нашел способ чтобы он работал и думал, что я буду записывать его здесь для потомков. Спасибо за все ваши ответы, теперь я думаю, что проблема была вызвана конкретным интерфейсом jQuery, который использует моя программа; поэтому он работал для многих других людей, но не для меня.

Проблема заключалась в том, что программа, созданная несколько вложенных тегов «пролетных» под кнопкой во время выполнения, так что во время выполнения программы он выглядел следующим образом:

<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"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
    <span class="ui-btn-text">Hide</span> 
    </span> 
</a> 

В то время как я пытался изменить значение баттона , то, что действительно нужно было изменить, это текст внутри тега 'span class = "ui-btn-text" кнопки.

Я изменил объявление кнопку, чтобы:

<a data-role="button" href="#" id="login-form-showchars">Show</a> 

И команда внутри функции:

$("#login-form-showchars .ui-btn-text").text("Hide"); 

И это работало нормально. Надеюсь, это поможет кому-то не пройти через то, что я сделал!

Answer 1

Это, кажется, работает хорошо с вашим кодом с помощью

document.getElementById('login-form-showchars').value = 'Hide'; document.getElementById('login-form-showchars').value = 'Show';

точного демонстрационного показать/скрыть пароль + переключая кнопку текст, чтобы показать/скрыть
source | demo

браузер вопрос?

Answer 2

$('#login-form-showchars').on('click', function() { 
    var target = $('#login-form-password'), 
     $this = $(this); 
    target.attr('type', function(i, oldType) { 
    this.type = oldType == 'password' ? 'text' : 'password'; 
    $this.val(this.type == 'text' ? 'Hide' : 'Show'); 
    }); 
}); 

Working Demo

Answer 3

будет ли это то, что вы хотите?

$('#login-form-showchars').click(
    function(e){ 
     var typ = $('#inp').attr('type'); 
     $('#inp')[0].type = typ === 'password' ? 'text' : 'password'; 
     this.value = (typ === 'password' ? 'Hide' : 'Show'); 
    } 
)​; 

Смотреть это jsfiddle