Actualmente estoy aprendiendo javascript. Funciona cuando tengo una entrada, pero cuando tengo más de una, estoy confundido acerca de recorrer el ícono y la entrada. ¿Cuál crees que sea el problema?. Perdón por mi mal ingles. Espero que entiendas de lo que estoy hablando.
const inputs = document.querySelectorAll('.show-hide-password'); const icon = document.querySelectorAll('i.password'); // Experiment 1 icon.forEach(function (ele) { ele.addEventListener('click', function (e) { const targetInput = e.target.previousElementSibling.getAttribute('type'); if (targetInput == 'password') { targetInput.type = 'text'; ele.classList.remove('fa-eye-slash'); ele.classList.add('fa-eye'); } else if (targetInput == 'text') { targetInput.type = 'password'; ele.classList.add('fa-eye-slash'); ele.classList.remove('fa-eye'); } }); }); // Experiment 2 // icon.forEach(function (ele) { // ele.addEventListener('click', function (e) { // inputs.forEach(function (input) { // const targetInput = input.getAttribute('type'); // if (targetInput == 'password') { // targetInput.type = 'text'; // ele.classList.remove('fa-eye-slash'); // ele.classList.add('fa-eye'); // } else if (targetInput == 'text') { // targetInput.type = 'password'; // ele.classList.add('fa-eye-slash'); // ele.classList.remove('fa-eye'); // } // }); // }); //}); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <div class="form-group"> <label>New Password</label> <input type="password" class="form-control show-hide-password" autocomplete="off" required> <i class="fa fa-eye-slash password"></i> </div> <div class="form-group"> <label>Confirm New Password</label> <input type="password" class="form-control show-hide-password" autocomplete="off" required> <i class="fa fa-eye-slash password"></i> </div>Tienes que cambiar el atributo del elemento con Element.setAttribute así:
const inputs = document.querySelectorAll('.show-hide-password'); const icon = document.querySelectorAll('i.password'); // Experiment 1 icon.forEach(function (ele) { ele.addEventListener('click', function (e) { const targetInput = e.target.previousElementSibling.getAttribute('type'); if (targetInput == 'password') { e.target.previousElementSibling.setAttribute('type', 'text'); ele.classList.remove('fa-eye-slash'); ele.classList.add('fa-eye'); } else if (targetInput == 'text') { e.target.previousElementSibling.setAttribute('type', 'password'); ele.classList.add('fa-eye-slash'); ele.classList.remove('fa-eye'); } }); }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <div class="form-group"> <label>New Password</label> <input type="password" class="form-control show-hide-password" autocomplete="off" required> <i class="fa fa-eye-slash password"></i> </div> <div class="form-group"> <label>Confirm New Password</label> <input type="password" class="form-control show-hide-password" autocomplete="off" required> <i class="fa fa-eye-slash password"></i> </div>