CODEWITHSUNDEEP
javascript
Lee Alex
Lee Alex

Reputation: 171

Calling a function by addEventListener, but the function only work one time, can not call it again

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

Answers (2)

The Bomb Squad
The Bomb Squad

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

Zac Anger
Zac Anger

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

Related Questions