Hice un pequeño script para cuando alguien hace clic en la imagen de este ojo, el tipo de entrada se cambió de ''contraseña'' a ''texto''
function mostrarocultarsenha() { var senha = document.getElementById("senha") if (senha.type == "password") { senha.type = "text"; } else { senha.type = "password" } } <div class="campo"> <label for="password"><strong>Senha</strong></label> <input type="password" name="senha" id="senha" required></input> </div> <img class="olho" id="olho" src="https://via.placeholder.com/100" onclick="mostrarocultarsenha()">Quiero que cuando la entrada cambie de contraseña a texto, la imagen también cambie de un ojo a un ojo con un rasguño, y luego, si se vuelve a hacer clic, vuelva al ojo normal, ¿alguien sabe cómo puedo hacer esto?
const olho = document.querySelector("#olho") if (senha.type === "password") { senha.setAttribute("type", "text") olho.src = "image link/path" } else { senha.setAttribute("type", "password") olho.src = "another image link/path" }básicamente es solo un ID de elemento src, en realidad es muy simple
<div class="campo"> <label for="password"><strong>Senha</strong></label> <input type="password" name="senha" id="senha" required></input> </div> <a onclick="mostrarocultarsenha()"><img class="olho" id="olho" src="assets/closedEye.png"/></a> function mostrarocultarsenha() { var senha = document.getElementById("senha") if (senha.type == "password") { senha.type = "text"; document.getElementById("olho").src = "assets/openedEye.png"; } else { senha.type = "password" document.getElementById("olho").src = "assets/closedEye.png"; } }