Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

176
Vistas
Swap image with JavaScript

I made a small script for when someone clicks on this eye image the input type was changed from ''password'' to ''text''

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()">

Photo from my website

I want that when the input changes from password to text, the image also changes from an eye to an eye with a scratch, and then if clicked again, go back to normal eye, does anyone know how I can do this?

about 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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"
}

w3schools

about 4 years ago · Santiago Trujillo Denunciar

0

basically it's just a element ID src it's actually really 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";

  }
}

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda