I had a question about my change of icon in a javascript on a login page. I tried to use the same code or other parts of the page and it did not work, because on that same page there are other elements with the same type of button that would be ".btn.btn-sm". Would there be any other way to make this script work? Here's my code:
<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><scriptsrc="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 -->