1

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 -->

2 Respostas 2

1

No segundo campo Senha2 você não precisa pegar o botão através da classe. No evento onClick você já está passando elemento do botão chamando a função da forma mostrar(this). E você pode utilizar a mesma função para ambos.

Segue o código alterado, desta forma você estará realizando a atualização somente no botão clicado e irá otimizar o seu 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='senha' id="senha" class='form-control' placeholder='Nova Senha' autofocus required></div>
  <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" onclick="mostrar(this)"></button>
</form>
<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>
<!-- Fim Campo Senha2 -->

<!-- Script para ambos os botões -->
<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

    if (e.classList.contains("glyphicon-eye-open")) { //se tem olho aberto
      e.classList.remove("glyphicon-eye-open"); //remove classe olho aberto
      e.classList.add("glyphicon-eye-close"); //coloca classe olho fechado
    } else { //senão
      e.classList.remove("glyphicon-eye-close"); //remove classe olho fechado
      e.classList.add("glyphicon-eye-open"); //coloca classe olho aberto
    }

  }
</script>
<!-- FIM Script para ambos os botões -->

<br>

1
  • Mto obrigado amigo consegui resolver meu problema com a sua resposta.
    – Carlos
    Commented 31/05/2018 às 20:04
-1

É só adicionar outra classe no seu segundo botão:

<!--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 btn-2 glyphicon glyphicon-eye-open" onclick="mostrar(this)">botao 2</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-2"); //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>
5
  • Como a ação esperada é a mesma para ambos os botões uma solução mais otimizada seria usar a mesma função para ambos, não acha Bia? Commented 30/05/2018 às 17:27
  • Sim, você tem toda a razão
    – Bia Silva
    Commented 30/05/2018 às 17:35
  • Show, mas a sua também funcionária perfeitamente =) Commented 30/05/2018 às 17:40
  • Funciona, mas foi resposta de preguiçoso kkk nem prestei atenção que o script fazia a mesma coisa para os dois botões. É claro que a melhor opção é ter só um código para os dois e não repetir ele.
    – Bia Silva
    Commented 30/05/2018 às 17:53
  • Nada amigo aprendi com a sua resposta posso usar teu método em outras situações que com certeza vou encontrar. Muito obrigado pela ajuda.
    – Carlos
    Commented 31/05/2018 às 20:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .