Skip to content
Advertisement

Input password show and hide

I hope I don’t bother you with a question 🙂 . I have little knowledge about writing code, so I encountered an error there are two inputs I added an eye icon with bootstrap when clicked, the password appears the first input works, but the second input does not show the password What do you think is the problem. sorry about my bad English.

JavaScript

enter image description here

Advertisement

Answer

document.querySelector is going to return the first element in your page. So, your logic works fine with the first input but not in the second input as document.querySelector is still going to return the first element.

You can use document.querySelectorAll and then use indexing to access you input as below-

JavaScript
JavaScript

I have edited your code because of multiple variables with same name. I have appended 1 to the variables for first input and 2 to variables for second input.

As mentioned in one of the comments, I have duplicated the event listeners here for both inputs just for demonstration purpose, but you can attach the same event listener to both inputs with looping and providing a custom argument to the event listener.

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement