I want to create a modern password input, with a toggle password button that changes the type of input.
Problem:
I did all of the things below but when I test it and click on the icon, it is not changing anything.
function toggle_password() {
const input = getElementById("toggle_password");
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
<input id="toggle_password" class="align from_Input password" type="password" placeholder="Password" required />
</div>And here I made the toggle_password function.
First, it's document.getElementById, getElementById is a method inside document object.
Second, the icon and input has the same id, the id attribute should be unique ( I changed the input id to toggle_password__input ).
function toggle_password() {
const input = document.getElementById("toggle_password__input");
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}<div>
<i
class="fa fa-eye"
aria-hidden="true"
id="toggle_password"
onClick="toggle_password()"
>toggle</i>
<input
id="toggle_password__input"
class="align from_Input password"
type="password"
placeholder="Password"
required
/>
</div>You are using same id in two different inputs. Since the id toggle_password appears first on the <i> element, <i> was being taken into account
Also document was missing in
const input = document.getElementById("password");
PROBLEM: Check the log when you click on the icon, its saving <i> in the input variable.
function toggle_password() {
const input = document.getElementById("toggle_password");
console.log(input)
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
<input id="toggle_password" class="align from_Input password" type="password" placeholder="Password" required />
</div>Solution:
Give a different id to password <input> element and use that id to get the element. So you will save <input> element in input variable.
function toggle_password() {
const input = document.getElementById("password");
console.log(input)
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
<input id="password" class="align from_Input password" type="password" placeholder="Password" required />
</div>You can simplify both, your markup and your script as demonstrated below:
document.querySelector(".fa-eye").onclick=ev=>{
let inp=ev.target.nextElementSibling;
inp.type=inp.type==="password"?"text":"password";
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true"></i>
<input class="align from_Input password" type="password" placeholder="Password" required />
</div>