Change icon automatically by clicking

Asked

Viewed 2,982 times

1

I had a question about changing icon in a javascript on a login page. I tried to use the same code or other parts of the page and it didn’t work, because on this same page there are other elements with the same type of Butão that would be ".btn.btn-Sm". Is there any other way to make this script work? Follow in 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>
<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 -->

javascript twitter-bootstrap

2 answers

1


In the second Password field2 you do not need to pick up the button through the class. In the onClick event you are already passing button element by calling the shape function show(this). And you can use the same function for both.

Follow the changed code, this way you will be performing the update only on the button clicked and will optimize your 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>
<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>

  • Mto thanks friend I managed to solve my problem with your answer.

-1

Just add another class to your second button:

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

  • As the expected action is the same for both buttons a more optimized solution would use the same function for both, do not think Bia?

  • Yes, you’re absolutely right

  • Show, but your also employee perfectly =)

  • It works, but it was response of lazy kkk nor did I pay attention that the script did the same thing for both buttons. Of course the best option is to have only one code for both and not repeat it.

  • Nothing friend I learned from your reply I can use your method in other situations I will definitely find. Thank you so much for your help.

Browser other questions tagged javascript twitter-bootstrap

You are not signed in. Login or sign up in order to post.