0

Hice este código:

document.addEventListener("DomContentLoaded", function(){

  var home = document.getElementById("home");
  var set = document.getElementById("settings");
  var binds = document.getElementById("binds");

  home.onclick = function(){
    
    document.getElementById("nickname").visibility = "visible";    
  };
  

  set.onclick = function(){
    
    document.getElementById("settings2").visibility = "visible";
     document.getElementById("nickname").visibility = "hidden";    
 
  };
  binds.onclick = function(){
    
    document.getElementById("binds2").visibility = "visible";
  };
  
  
});
<!DOCTYPE html>
<html>
<head>
  <style>
    #main {
      
      position: absolute;
      top: 12%;
      left: 25%;
      width: 350px;
      height: 410px;
      background-color: #CBCBCB;
      
    }
    ul {
      list-style-type: none;
      background-color: #A09C9C;
      overflow: hidden;
      margin: 0px;
      padding: 0;
    }
    li {
     float: left;
      
    }
    li a{
      display: block;
      padding: 20px 15px;
      color: white;
      
      
    }
    li a:hover:not(active) {
      
      background-color: black;
      
    }
    li a.active {
      
      background-color: black;
      
    }
   
    
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="main">
    <ul>
      <li id="home" ><a class="active">Home</a></li>
      <li id="settings"><a>Settings</a></li>
      <li id="binds"><a>Binds</a></li>
      
    </ul>
    
 
    <div id="nickname">
      
     <input style="margin-left: 5%; margin-top: 4%;" type="text" placeholder="{ogarpw}Nickname"/>
  <input style="border: 2px solid white; " type="button" value="Jugar"/>
    </div>
    <div id="settings2" style="visibility: hidden;">
      <h1 style="text-align: center;">Settings!</h1>
      <p> Cualquier configuracion disponible..</p>
    
    </div>
    <div id="binds2" style="visibility: hidden;">
      <h1 style="text-align: center;">Binds!</h1>
      <p> Cualquier bind disponible..</p>
    </div>
    
    
    
  </div>
</body>
</html>

1) Se supone que al hacer click en 'settings', oculta el contenido del div nickname y muestra el contenido del div settings2, pero no es asi, por que me falla ese aspecto?

2
  • Porque tienes que usar style: elemento.style.visibility = 'visible'.
    – gugadev
    el 12 jul. 2017 a las 3:25
  • Referencia
    – Dev. Joel
    el 12 jul. 2017 a las 3:40

1 respuesta 1

1

El mapeo de las propiedades css en los elementos se hacen en la propiedad style, la cual almacena un objeto CSSStyleDeclaration que es básicamente una especie de objeto literal al ser conformado por clave - valor.

Yu código debe ser:

document.getElementById("nickname").style.visibility = "visible";

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.