Membuat Tombol Show/Hide Password HTML, Vanilla Javascript

Oleh rezaldy266 Oktober 10, 2021

Membuat Tombol Show/Hide Password

Halo semuanya, untuk blog kali ini saya akan memberitahu cara membuat tombol show/hide password

di form input password, oke langsung aja kalian liat code dibawah ini;

oke kalau kalian sudah liat codenya.., kalau misal pusing hihihi, tenang bakal gw jelasin

</svg></button>

code di atas adalah code untuk membuat tombol yang berisi icon mata, kenapa acak-acak banget karena untuk icon matanya saya menggunakan gambar svg.

code yang di atas, code untuk membuat input ya, yang harus kalian catat type input disitu yaitu "password"

// ambil Element Tombol Show/Hide

var button = document.getElementsByClassName("showHide");

code di atas mengambil element button menggunakan nama classnya yaitu showHide

//ambil Element Input Password

var inputPw = document.getElementsByClassName("inputPw");

code di atas mengambil element input menggunakan nama classnya yaitu inputPw

//variabel parameter

var showPassword;

code di atas kita membuat variabel showPassword untuk parameter nilai true/false input dia dalam posisi type password atau type text

//Jika Tombol Show/Hide di Klik

button[0].addEventListener("click", function(nilaiTombol){});

code di atas berfungsi kita bisa memberi perintah jika tombol Show/Hide diklik, dan kita memberi parameter nilaiTombol buat mendaptakan nilai tombol itu true/false;

//Jika tombol di klik nilaiTombol => true/false

nilaiTombol = showPassword = !showPassword;

code di atas kita membuat bila tombol di klik pertama akan bernilai true dan klik kan kedua dia bernilai false pada klikkan ketiga dia kembali true dan seterusnya, jadi kita membuat tombol bersifat true/false bila di klik

//Jika nilaiTombol true/password merubah type Input

if(inputPw[0]){

inputPw[0].type = nilaiTombol ? "text" : "password";}

code di atas berfungsi jika tombol diklik bernilai true apa element input akan berubah typenya menjadi text dan sebaliknya jika tombol diklik bernilai false makan element input akan berubah typenya menjadi password kembali, ini lah logic code yang berfungsi Show/Hide passwordnya

Oke, mungkin sekian dari tutorial membuat tombol show/hide password, kalau kalian masih kurang paham kalian bisa membaca artikel tentang HTML dan Javascript, saya ucapkan terimakasih banyak,see you...😄