Membuat Tombol Show Password dengan Javascript

Membuat Tombol Show Password menggunakan javascript - Hallo semuanya pada artikel sebelumnya saya sudah membuat sebuah artikel serupa dengan jquery, artikel tersebut berjudul Membuat Tombol Show Password dengan JQuery Pada artikel tersebut kita menggunakan checkbox untuk menerapkannya,

Sekarang ini kita akan membahas tentang bagaimana cara membuat tombol show password menggunakan javascript. Ya, tentu konsepnya hampir mirip dengan artikel sebelumnya, hanya saja kali ini kita akan membahasnya menggunakan javascript, baiklah sekarang kita akan lihat tutorialnya.
saat ini kita akan coba menggunakan template bootstrap untuk mempermudah membuat tampilannya.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- javascript first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.javascript.com/javascript-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Selanjutya, kita akan membuat struktur form login dengan html seperti berikut, disini kita menggunakan fungsi onclick pada div yang menjadi tombol nya

<div class="row justify-content-center mt-5">
      <div class="col-3">
        <h2 class="text-center mb-4">LOGIN</h2>
        <div class="input-group mb-2 mr-sm-2">
          <input type="text" class="form-control" id="inputUsername" placeholder="Username">
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          <div class="input-group-prepend">
            <div  onclick="myFunction()" class="input-group-text btn btn-secondary">Show</div>
          </div>
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <input type="submit" class="form-control btn btn-success" value="Login" >
        </div>

      </div>
    </div>

selanjutnya kita akan memberikan fungsi javascript untuk membuat tombol show password berfungsi

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

Baiklah teman teman, demikian artikel kali ini yang membahas tentang cara membuat tombol show password dengan menggunakan javascript, semoga bermanfaat