how to write a code of show and hide password input field

In this question there are the following answers of this question but i give the best answer of this question.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  function myFunction() {
      var data = document.getElementById("myInput");
      if (data.type === "password") {
        data.type = "text";
      } else {
        data.type = "password";
      }
    }

<!-- language: lang-html -->

<div class="form-group col-md-6">
<label class="control-label">Password</label>
<input type="Password" name="password password1" id="myInput" class="form-control eye" value="{{old('password')}}">

<i class="fa fa-eye" aria-hidden="true" onclick="myFunction()"> Show Hide</i> {!! $errors->first('password', '<p class="text-warning errorBag">:message</p>') !!}
</div>

<!-- end snippet -->

Share my answer please

Here is a shorter approach:

    var input = document.getElementById("myInput");
    function myFunction()
    { input.type = input.type === "password" ? "text" : "password" }
   

function myFunction() {
  var data = document.getElementById("myInput");
  var curType = data[0].getAttribute("type");
  if (curType === "password") {
    data.[0].setAttribute("type","text");
    
  } else {
    data.[0].setAttribute("type","password");
    
  }
}

I am not finding any mistake or wrong in your code, You can use following link for your answer: https://www.w3schools.com/howto/howto_js_toggle_password.asp

Try This:

<script type="text/javascript">  
            $(document).ready(function () {  
                $('#show_password').hover(function show() {  
                    //Change the attribute to text  
                    $('#txtPassword').attr('type', 'text');  
                    $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');  
                },  
                function () {  
                    //Change the attribute back to password  
                    $('#txtPassword').attr('type', 'password');  
                    $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');  
                });  
                //CheckBox Show Password  
                $('#ShowPassword').click(function () {  
                    $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');  
                });  
            });  
        </script>  

you can try this

html code

<div class="form-group col-md-6">
<label class="control-label">Password</label>
<input type="Password" name="password password1" id="myInput" class="form-control eye" value="{{old('password')}}">
<button class="fa fa-eye" aria-hidden="true" onclick="myFunction()"> Show Hide</button>                                                     </div>

css code

 function myFunction() {
      var data = document.getElementById("myInput");
      if (data.type === "password") {
        data.type = "text";
      } else {
        data.type = "password";
      }
    }