1

¿Dónde falla el funcionamiento del boton "Cambiar"?

Consiste en un archivo HTML que tiene enlazado un archivo JS en el mismo directorio.

"Cambiar" deberia mostrar un bloque de código HTML que está oculto.

function show_PassChange(){
	var x=document.getElementById("PassChange");
	if(x.style.display=='inline'){x.style.display:'none';}
	else{x.style.display:'none'}
}
<!DOCTYPE html> 
<html>
   <head>
      <script src="prueba.js" type="text/javascript"></script> 
   </head>
   <body>
      <button onclick="show_PassChange();">Cambiar</button> 
      <div id="PassChange">
         <ul style="display:none;"> <label>Contrasenia:</label> <input type=password> <label>Confirmar contrasenia:</label> <input type=password> </ul>
      </div>
   </body>
</html>

3
  • 2
    x.style.display:'none'; no es dos punto, se usa el sugno de igual (=). x.style.display='none'; el 11 ene. 2019 a las 14:25
  • Me sirvio , muchas gracias!! el 11 ene. 2019 a las 14:34
  • tambien fijate en el if, si el if se cumple haces lo mismo tanto en el if como en el else, mejor elimina el if y el else y solo deja x.style.display='none'; el 11 ene. 2019 a las 14:37

2 respuestas 2

2

El problema que encuentro es que estás utilizando : en vez de = para asignar el valor de la propiedad display en ambos casos, al parecer estás confundiendo la forma como se asignan dichos valores en CSS y en JavaScript.

function show_PassChange(){
	var x=document.getElementById("PassChange");
	if(x.style.display=='inline'){x.style.display ='none';}
	else{x.style.display ='none'}
}
<!DOCTYPE html> 
<html>
   <head>
      <script src="prueba.js" type="text/javascript"></script> 
   </head>
   <body>
      <button onclick="show_PassChange();">Cambiar</button> 
      <div id="PassChange">
         <ul> <label>Contrasenia:</label> <input type=password> <label>Confirmar contrasenia:</label> <input type=password> </ul>
      </div>
   </body>
</html>

1

tu codigo tienene alguanas fallas:

  • el elemento display:'none' debes colocarlo en la etiqueta que tiene el mismo id que usaras en el JS, en tu codigo no es asi

  • Cambie el atributo .style.display ='none'; por .style.display ='block';

finalmente quedaria así:

function show_PassChange(){
	var x=document.getElementById("PassChange");
	if(x.style.display=='inline'){
    x.style.display = 'block';
  }
	else{
    x.style.display = 'block';
  }
}
<!DOCTYPE html> 
<html>
   <head>
      <script src="prueba.js" type="text/javascript"></script> 
   </head>
   <body>
      <button onclick="show_PassChange();">Cambiar</button> 
      <div id="PassChange" style="display:none;">
         <ul > <label>Contrasenia:</label> <input type=password> <label>Confirmar contrasenia:</label> <input type=password> </ul>
      </div>
   </body>
</html>

2
  • Ahi me ha funcionado , muchas gracias!! el 11 ene. 2019 a las 14:34
  • Tu respuesta se acopla a lo que el OP pidio, de seguro fue un error de dedo o de click :-) saludos. el 11 ene. 2019 a las 14:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.