Change icon automatically when clicking

Navigation
1

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 -->
    
asked by anonymous 30.05.2018 / 19:07

2 answers

1

In the second Password2 field you do not need to pick the button through the class. In the onClick event you are already passing element of the button by calling the function of the form 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 clicked button 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><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='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>
    
30.05.2018 / 19:20
-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>
    
30.05.2018 / 19:18
I can not return onclick property to a button with its parameters Different coding problem when registering data via PHP project or directly through MySQL [duplicate]