Icon is not switching when using a show/hide password symbol (HTML, CSS, JS)

Question

I followed a video on creating a simple login form. I'm working on developing it further and added a show/hide password icon with JS to make it happen. However, the video I watch has it working perfectly but it doesn't on my end. I did a search here, found a related article but the solutions did not work.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTG-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Login & Registration | Nick</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https:stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://kit.fontawesome.com/0938e96d29.js" crossorigin="anonymous"></script>

        <div class="form-box login">
            <h2>Login</h2>
            <!--Allows the use of a form box-->
            <form action="#">
                <div class="input-box">
                    <i class="fa-regular fa-envelope"></i>
                    <input type="email" required>
                    <label>Email</label>
                </div>
                <div class="input-box">
                    <!--<span class="iconLock"><ion-icon name="lock-closed"></ion-icon></span> -->
                    <!--<span class="icon-eye-outline" id="icon-eye-outline"><ion-icon name="eye-outline"></ion-icon></ion-icon></span>
                    <span class="icon-eye-off-outline"><ion-icon name="eye-off-outline"></ion-icon></ion-icon></ion-icon></span> -->
                    <input type="password" required id="password">
                    <label>Password</label>
                    <i class="fa fa-eye" id="show-password"></i>
                </div>
                <div class="remember-forgot">
                    <label><input type="checkbox"> Remember me</label>
                    <a href="#">Forgot Password?</a>
                </div>
                <button type="submit" class="btn">Login</button>
                <div class="login-register">
                        <p>Don't have an account? 
                            <a href="#" class="register-link">Register</a>
                        </p>
                </div>

            </form>
        </div>

CSS:

.input-box .fa-eye {
    position: absolute;
    right: 8px;
    font-size: 1.2em;
    color: black;
    line-height: 57px;
    cursor: pointer;
}

.input-box .fa-eye-slash {
    position: absolute;
    right: 8px;
    font-size: 1.2em;
    color: black;
    line-height: 57px;
    cursor: pointer;
}

JS:

const showPassword = document.querySelector("#show-password");
const passwordField = document.querySelector("#password");

showPassword.addEventListener("click", function() {
    this.classList.toggle("fa-eye-slash");
    const type = passwordField.getAttribute("type") === "password" ? "text" : "password";
    passwordField.setAttribute("type", type);
  })

Looking forward to your guys answers, thanks!

I've tried multiple variations and placement of the HTML and JS code, additionally I tried a standard if, then but no luck either.

Answer: in script.js: I added both fa-eye and fa-eye-slash, so now it reads;

this.classList.toggle("fa-eye");
this.classList.toggle("fa-eye-slash");

you need to also this.classList.toggle("fa-eye");

Jaromanda X
– Jaromanda X

2024-02-13 03:23:20 +00:00
Commented Feb 13, 2024 at 3:23 — Jaromanda X
– Jaromanda X, Commented Feb 13, 2024 at 3:23

Griffin · Accepted Answer · 2024-02-13 03:25:13Z

0

The class fa-eye-slash is being added to the class list of showPassword. However, no difference is shown as the fa-eye class takes precedence over the fa-eye-slash class, probably due to how FontAwesome renders this.

So what to do? Let's toggle both classes instead, with help from this answer!

  showPassword.addEventListener("click", function() {
    ["fa-eye", "fa-eye-slash"].map(v=> showPassword.classList.toggle(v) )
    const type = passwordField.getAttribute("type") === "password" ? "text" : "password";
    passwordField.setAttribute("type", type);
  })

This will map over each property added to the preceding array, toggling each class added to it. So, as fa-eye gets removed, fa-eye-slash will be added.

answered Feb 13, 2024 at 3:25

Griffin

8822 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaromanda X Over a year ago

to be honest, I'd use two lines of this.classList.toggle over what you propose - for readability :p I'd also be tempted to use the toggle(token, force) version of toggle :p

Nick B Over a year ago

You guys are awesome. What worked for me was adding this.classList.toggle("fa-eye"); above the original this.classList.toggle

Collectives™ on Stack Overflow

Icon is not switching when using a show/hide password symbol (HTML, CSS, JS)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related