JS Function to hide and show password doesn't work

Question

Whi my function to hide and show my password does not work? Anyone could help me?

#HTML:

<div class="senha">
<i class="bi bi-key"></i>
<input type="password" required autofocus placeholder="senha" id="idsenha">
<i class="bi bi-eye"></i>
</div> 

JS:

let btn = document.querySelector('.bi-eye');

btn.addEventListener('click', function() {

    let input = document.querySelector('#idsenha');

    if(input.getAttribute('type') == 'password') {
        input.setAttribute('type', 'text');
    } else {
        input.setAttribute('type', 'password');
    }
});

Answer 1

Your code works.

 let btn = document.querySelector('.bi-eye'); btn.addEventListener('click', function() { let input = document.querySelector('#idsenha'); if (input.getAttribute('type') == 'password') { input.setAttribute('type', 'text'); } else { input.setAttribute('type', 'password'); } });

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.2/font/bootstrap-icons.css" /> <div class="senha"> <i class="bi bi-key"></i> <input type="password" required autofocus placeholder="senha" id="idsenha"> <i class="bi bi-eye"></i> </div>