JavaScript Show/Hide Password Toggle — Beginner DOM Project 2026

Introduction

Have you ever filled out a login form and wished you could see what you typed in the password field? That's exactly what a Show/Hide Password Toggle does — it lets users switch between hidden (••••••) and visible (myPass123) password text with a single click.

This is one of the most practical beginner DOM projects because:

• It's used on every major website (Google, Facebook, Amazon)
• It teaches event handling, attribute manipulation, and conditional logic
• You can build it in under 30 lines of JavaScript

In this tutorial, we'll build a complete password toggle from scratch — with an eye icon that switches between "show" and "hide" states. By the end, you'll understand how to manipulate input attributes and toggle UI states confidently.

HTML Structure

We need a container that holds the password input and a toggle button (eye icon) side by side.

Important points:

• We use Font Awesome for the eye icon (fa-eye and fa-eye-slash)
• The button has type="button" so it doesn't submit a form accidentally
• aria-label improves accessibility for screen readers

CSS Styling

The CSS positions the eye icon inside the input field for a clean, modern look.

Result: A centered login card with a password input field.
The eye icon sits inside the input on the right side.
Hovering the icon changes its color to purple.

JavaScript — Core Logic

Now let's write the JavaScript that powers the toggle functionality.

Step 1: Select Elements

Step 2: Add Click Event Listener

Click 1: Password "hello123" becomes visible → icon changes to eye-slash
Click 2: Password "hello123" becomes hidden (••••••••) → icon changes back to eye

How It Works Internally

1. getAttribute('type') reads the current state of the input
2. setAttribute('type', 'text') removes the masking — browser shows plain text
3. classList.remove / add swaps the Font Awesome icon class
4. Each click toggles between the two states

Handling Multiple Password Fields

In real forms (like signup pages), you often have two password fields — "Password" and "Confirm Password". Here's how to handle multiple toggles efficiently:

Each toggle button independently controls its own password field.
Clicking toggle on "Password" field does NOT affect "Confirm Password" field.

Key techniques used:

• querySelectorAll selects all toggle buttons
• closest('.input-group') finds the parent container of the clicked button
• classList.replace() is a cleaner way to swap classes in one call

Complete Code

Here's the full working project in a single file for quick testing:

┌──────────────────────────────┐
│          Login Form          │
│                              │
│  ┌────────────────────┬───┐  │
│  │ ••••••••           │ 👁 │  │
│  └────────────────────┴───┘  │
│                              │
│  Click eye icon...           │
│                              │
│  ┌────────────────────┬───┐  │
│  │ hello123           │ 👁‍🗨│  │
│  └────────────────────┴───┘  │
└──────────────────────────────┘

Key Takeaways

1. The type attribute controls visibility — switching between "password" and "text" is all it takes to show or hide the password characters.

1. Use classList.replace() for icon swaps — it's cleaner than calling remove() and add() separately, and it reads better in code reviews.

1. closest() enables reusable toggle logic — when handling multiple password fields, use closest() to scope each button's behavior to its parent container.

1. Always add type="button" on toggle buttons — without it, buttons inside a <form> default to type="submit" and will accidentally submit the form.

1. Accessibility matters — add aria-label to the toggle button so screen readers announce "Toggle password visibility" instead of reading the icon's class name.

1. Direct property access (input.type) works — you can use element.type as a shortcut instead of getAttribute('type') / setAttribute('type', value) for standard HTML properties.

FAQ

Q1: Can I use a checkbox instead of an eye icon to toggle password visibility?

Yes! A checkbox approach is simpler and equally valid:

The checkbox version is great for accessibility — screen readers naturally announce the checked/unchecked state. The eye icon version looks more modern but requires aria-label for the same accessibility level.

Q2: Does changing the input type from "password" to "text" cause any security risk?

The toggle itself doesn't create a security vulnerability because:

• The password is already in memory (the user typed it)
• It's only visible on the user's own screen
• It doesn't transmit the password anywhere

However, be mindful of shoulder surfing — someone looking over the user's shoulder could read the password. That's why the default state should always be type="password" (hidden), and the toggle should revert to hidden after a few seconds on sensitive applications.

Q3: Why does my toggle button submit the form instead of toggling?

This happens because buttons inside a <form> element have type="submit" by default. When you click the eye icon button, it submits the form instead of running your toggle code.

Fix: Always set type="button" explicitly:

This is a common mistake in form-based projects. Remember: inside a form, always specify the button type!