Проблема с атрибутами?

Question

[spoT1]

let img = document.querySelector('img');
let password = document.querySelector('.password');
console.log(password.getAttribute('type'));
if(password.getAttribute('type') == 'password'){
    img.addEventListener('click',showPassword);

    

}else if(password.getAttribute('type') == 'text'){
    img.addEventListener('click',dontShowPassword);
}
function showPassword(){
    img.addEventListener('click', ()=>{
    password.setAttribute('type', 'text');
    });
}
function dontShowPassword(){
    img.addEventListener('click', ()=>{
        password.setAttribute('type', 'password');
});
}

С пароля на текст меняется, но обратно не меняется

Answer 1

[Сергей Соколов]

Не разобрались с событиями и их слушателями.

Картинка для клика одна и та же, не меняется. Клик по картинке можно обрабатывать одной и той же функцией.
Ставить новый тип полю, в зависимости от текущего:

const elPassword = document.querySelector('.password');

document.querySelector('img')
  .addEventListener("click", () => {
    elPassword.setAttribute(
      "type",
      elPassword.getAttribute("type") === "password" ? "text" : "password")
  });

По клику всегда меняем атрибут. Вопрос лишь в том, на какое значение.