my checkbox button is not working(possibly because of css)

Asked

Viewed 29 times

1

I’m trying to make a login screen but I tried to make a <input type="checkbox" class="senhaMostrarOuOcultar" onclick="mostrarSenhaEOcultar()"> for it to hide or show the password, but when it is without css works normally, when I put the css to work, I click and it does not mark anything css is

input[type="checkbox"]{
position: relative;
left: 490px;
top: 100px;
}

but I’ve also tried

.senhaMostrarOuOcultar{
position: relative;
left: 490px;
top: 100px;
}

I tried for the class and the input + its type but for some reason it doesn’t work and I think it’s because of the css someone can help me

javascript html5 css3

  • onclick="show ?

  • the html code that shows the button was only that first code already js has Function displaySenhaEOcultar(){ var password = Document.getElementById("password"); if(password.type ="password"){ password.type = "text"; } Else{ password.type = "password"; } }

  • password id is so from password input tag

  • @hugocsl besides that I made it very clear that css is pq when ta without css it works

  • You may be at risk of falling into problem X Y. (https://pt.meta.stackoverflow.com/questions/499/o-que%C3%A9-the-problem-xy) If you need help, I advise you to enter all the code so that we can help by thoroughly analyzing the whole context!

1 answer

1

I don’t know how your Javascript is, so I’ll suggest you the following code:

function mostrarSenhaEOcultar() {
  var x = document.getElementById("senhaInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
<div>
  <label for="senhaInput">Senha: </label>
  <input type="password" value="123456" id="senhaInput">
</div>
<div>
  <input type="checkbox" id="mostrarOcular" onclick="mostrarSenhaEOcultar()">
  <label for="mostrarOcular">Mostrar Senha</label>
</div>

I included two label for so that you can access the input by clicking on the text.

About css, I don’t recommend you set exact position, even more using Bootstrap.

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.