Reputation: 171
I'm trying to make a function that making the password to be text if I click the eye, if you click again, the eye will close. I may use this function for other input, so I separate the function, so I do not use the way that eye.onclick=function(){...};
Below is my code, but my code only work one time, first time I click it, the eye open, but click again, the eye can not close, is that I need to remove the EventLister?
var password = document.getElementById('passWord');
var eye = document.querySelector('#eye');
var flag = 0;
var eyeOpen = function(obj,eyes,flag){
if (flag===0){
eyes.className="eye_open";
obj.type = 'text';
flag=1;
}else{
eyes.className = "eye_close";
obj.type = 'password';
flag = 0;
}
}
eye.addEventListener('click', function () {
eyeOpen(password,eye,flag);
});
Upvotes: 0
Views: 70
Reputation: 4337
var password = document.getElementById('passWord');
var eye = document.querySelector('#eye');
var flags=[0] //index based stuff
//if you have another eye..
//flags.push(0)
function openEye(index,password){
flags[index]++
if(flags[index]%2){password.type="text"}
else{password.type="password"}
}
eye.addEventListener('click',function(){
openEye(0,password) //for each eye the values can change :|
})
<input id="passWord" type="password"/>
<button id="eye">THE EYE</button>
Upvotes: 0
Reputation: 7787
Please see the discussion here: Pass variables by reference in JavaScript. The problem is that you're passing 0
around, when what you want to be doing is changing flag
directly.
var password = document.getElementById('passWord')
var eye = document.getElementById('eye')
var flag = 0
var eyeOpen = function(obj, eyes) {
if (flag === 0) {
eyes.className= 'eye_open'
obj.type = 'text'
flag = 1
} else {
eyes.className = 'eye_close'
obj.type = 'password'
flag = 0
}
}
eye.addEventListener('click', function () {
eyeOpen(password, eye)
})
The downside of this is that if you're reusing this code in several places, you could have several flags to keep track of. Rather than doing that, you could check the classList (or the input type), which would mean one less variable to keep track of:
var password = document.getElementById('passWord')
var eye = document.getElementById('eye')
var eyeOpen = function (obj, eyes) {
var isOpen = eyes.classList.contains('eye_open')
// This would also work:
// var isOpen = obj.type === 'text'
if (isOpen) {
eyes.className = 'eye_close'
obj.type = 'password'
} else {
eyes.className= 'eye_open'
obj.type = 'text'
}
}
eye.addEventListener('click', function () {
eyeOpen(password, eye)
})
Upvotes: 1