How to change the type of an input with javascript-CodePudding

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  aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
  <input id="toggle_password"  type="password" placeholder="Password" required />
</div>

And here I made the toggle_password function.

CodePudding user response：

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
              
              aria-hidden="true"
              id="toggle_password"
              onClick="toggle_password()"
            >toggle</i>
            <input
              id="toggle_password__input"
              
              type="password"
              placeholder="Password"
              required
            />
          </div>

CodePudding user response：

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  aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
  <input id="toggle_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  aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
  <input id="password"  type="password" placeholder="Password" required />
</div>

CodePudding user response：

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  aria-hidden="true"></i>
  <input  type="password" placeholder="Password" required />
</div>