Tive uma pergunta minha a respeito de mudança de ícone em um javascript em uma página de login. Tentei usar o mesmo código nem outras partes da página e não funcionou, pois, nessa mesma página existem outros elementos com o mesmo tipo de butão que seria ".btn.btn-sm". Teria alguma outra forma de fazer esse script funcionar? Segue em meu código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Campo Senha1-->
<form method="POST">
<div class='input-group col-lg-6'>
<div class='input-group-addon'>
<span class='glyphicon glyphicon-question-sign'></span>
</div>
<input type='password' name='senha1' id="senha1" class='form-control' placeholder='Nova Senha' autofocus required></div>
<button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" onclick="mostrar1()"></button>
</form>
<script>
function mostrar1() {
var tipo = document.getElementById("senha1");
if (tipo.type == "password") {
tipo.type = "text";
} else {
tipo.type = "password";
}
tipo.type = tipo.type; //aplica o tipo que ficou no primeiro campo
var botao = document.querySelector(".btn.btn-sm"); //obter o botão
if (botao.classList.contains("glyphicon-eye-open")) { //se tem olho aberto
botao.classList.remove("glyphicon-eye-open"); //remove classe olho aberto
botao.classList.add("glyphicon-eye-close"); //coloca classe olho fechado
} else { //senão
botao.classList.remove("glyphicon-eye-close"); //remove classe olho fechado
botao.classList.add("glyphicon-eye-open"); //coloca classe olho aberto
}
}
</script>
<br>
<!--Fim Campo Senha1-->
<!--Campo Senha2 Este campo está em uma modal-->
<form method="POST">
<div class='input-group col-lg-6'>
<div class='input-group-addon'>
<span class='glyphicon glyphicon-question-sign'></span>
</div>
<input type='password' name='senha' class='form-control' value="<?php print $senha; ?>" placeholder='Nova Senha' style="background-color: PeachPuff;"></div>
<button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" onclick="mostrar(this)"></button>
</form>
<script>
function mostrar(e) {
var tipo = e.parentNode.querySelector("[name='senha']");
if (tipo.type == "password") {
tipo.type = "text";
} else {
tipo.type = "password";
}
tipo.type = tipo.type; //aplica o tipo que ficou no primeiro campo
var botao = document.querySelector(".btn.btn-sm"); //obter o botão
if (botao.classList.contains("glyphicon-eye-open")) { //se tem olho aberto
botao.classList.remove("glyphicon-eye-open"); //remove classe olho aberto
botao.classList.add("glyphicon-eye-close"); //coloca classe olho fechado
} else { //senão
botao.classList.remove("glyphicon-eye-close"); //remove classe olho fechado
botao.classList.add("glyphicon-eye-open"); //coloca classe olho aberto
}
}
</script>
<br>
<!--Fim Campo Senha2 -->