Varying value of a modal function within javascript

Navigation
1

I have a password change field in a modal, in this field I have a function in java script that shows the password when clicking on the icon, as I am in a modal the function works only in the first user of the list, because, the code understands that there is only one. My question is how do I vary the function name according to the modal? 

  <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 Senha-->
                            <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' value="senha" placeholder='Nova Senha' style="background-color: PeachPuff;" ></div>
                                <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open " onclick="mostrar()"></button>
                            </form>
                            <script>
                                function mostrar(){
                                    var tipo = document.getElementById("senha");
                                    if(tipo.type == "password"){
                                        tipo.type = "text";
                                    }else{
                                        tipo.type = "password";
                                    }
                                }
                            </script>
                            <br>
                            <!--Fim Campo Senha-->
    
asked by anonymous 28.05.2018 / 04:30

1 answer

0

It is not necessary to create a function for each situation. That would suck. Use only one function. Do not use id for this purpose, since a id must be unique on a page. Get the element by the proximity of the clicked button, how to find the element by name within the same container .

  

Delete the id="senha" attribute of the elements, not necessary.

You get it this way:

In% with%, include parameter onclick : 

<button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" onclick="mostrar(this)"></button>

And change the function to: 

function mostrar(e){
   var tipo = e.parentNode.querySelector("[name='senha']");
   if(tipo.type == "password"){
       tipo.type = "text";
   }else{
       tipo.type = "password";
   }
}

Example: 

function mostrar(e){
   var tipo = e.parentNode.querySelector("[name='senha']");
   if(tipo.type == "password"){
       tipo.type = "text";
   }else{
       tipo.type = "password";
   }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<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' value="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>
    
28.05.2018 / 05:35
NullPointer Exception when using the @Before and @After notations in Selenium Close a Dialogo When you click the back button