0

Tengo una consulta.

Sucede que quiero formar una "X" con Javascript: dándole clic a un div llama a una función que interactua al css y cambia la posición de otros div's mas pequeños y forman una "X". Bueno, eso si lo he podido hacer. Mi problema es que quiero que al darle clic al mismo div, quiero que los elementos regresen a su forma original (algo así como un efecto palanca) pero no he podido lograrlo.

Ya se que existe jQuery y también se puede hacer con CSS pero la verdad quiero hacerlo netamente con un código que yo mismo haga para así poder aprender y no solo usar librerías. Ademas, intentando solucionar esto me tope con otro tema... ¿Por qué Javascript solo encuentra a los elementos si solo los llamo por el ID?, intente llamarlos por el class pero no sucede nada, como si no los reconociera. Gracias de ante mano a los que puedan ayudarme.

 function exis(){
               var elementoDiv1 = document.getElementById('primera-linea');
               var elementoDiv2 = document.getElementById('segunda-linea');
               
               elementoDiv1.style.right="5px";
               elementoDiv2.style.top="5px";
               elementoDiv1.style.transform="rotate(-30deg)";
               elementoDiv2.style.transform="rotate(30deg)";
            
           }
        #Conten{
               width: 65px;
               height: 65px;
               padding-top: 10px;
               background-color: blueviolet;
           }
           #Conten div{
               width: 60px;
               height: 5px;
               margin-bottom: 5px;
               border-radius: 3px;
           }
           #BTN:checked ~ #Conten div{
               background-color: green;
           }
           #primera-linea {
               /*transform: rotate(-30deg);*/
               transform-origin: right;
               background-color: brown;
               /*top: 10px;*/
               /*right: 5px;*/
               transition: transform 0.5s;
               position: relative;
           }
           #segunda-linea{
               position: relative;
               /*top: 5px;*/
               /*transform: rotate(30deg);*/
               transform-origin: center;
               transition: transform 0.5s;
               background-color: red;
           }
           #tercera-linea{
               display: none;
               background-color: dimgrey;
               position: relative;
               top: 0px;
          
<html>
   <head>
   </head>
    <body>
      <!--<div id="contenedor">
       <input type="checkbox" id="BTN">
      <label for="BTN"> CLICK</label>-->
       <div id="Conten"  onclick="exis()" >
          <div id="primera-linea"></div>
          <div id="segunda-linea"></div>
          <div id="tercera-linea"></div> 
       </div>
      <!-- </div>-->
          
    </body>
</html>

introducir la descripción de la imagen aquí

2
  • 2
    Debes de poner el código que llevas, así no te responderán. el 29 jun. 2017 a las 14:21
  • Gracias por la sugerencia , es la primera ves que hago una consulta por aquí el 29 jun. 2017 a las 14:34

1 respuesta 1

0

Puedes poner una variable bandera que vea el estado actual del click, si la animación ya se hizo de una forma que se haga de la otra y viceversa.

 var bandera = false
 function exis(){
        var elementoDiv1 = document.getElementById('primera-linea');
        var elementoDiv2 = document.getElementById('segunda-linea');
        if (!bandera){
               elementoDiv1.style.right="5px";
               elementoDiv2.style.top="5px";
               elementoDiv1.style.transform="rotate(-30deg)";
               elementoDiv2.style.transform="rotate(30deg)";
               bandera = true;
         } else{
               elementoDiv1.style.right="0px";
               elementoDiv2.style.top="0px";
               elementoDiv1.style.transform="rotate(0deg)";
               elementoDiv2.style.transform="rotate(0deg)";
               bandera = false;
         } 
 }
       #Conten{
               width: 65px;
               height: 65px;
               padding-top: 10px;
               background-color: blueviolet;
           }
           #Conten div{
               width: 60px;
               height: 5px;
               margin-bottom: 5px;
               border-radius: 3px;
           }
           #BTN:checked ~ #Conten div{
               background-color: green;
           }
           #primera-linea {
               /*transform: rotate(-30deg);*/
               transform-origin: right;
               background-color: brown;
               /*top: 10px;*/
               /*right: 5px;*/
               transition: transform 0.5s;
               position: relative;
           }
           #segunda-linea{
               position: relative;
               /*top: 5px;*/
               /*transform: rotate(30deg);*/
               transform-origin: center;
               transition: transform 0.5s;
               background-color: red;
           }
           #tercera-linea{
               display: none;
               background-color: dimgrey;
               position: relative;
               top: 0px;
          
<html>
   <head>
   </head>
    <body>
       <div id="Conten"  onclick="exis()" >
          <div id="primera-linea"></div>
          <div id="segunda-linea"></div>
          <div id="tercera-linea"></div> 
       </div>
    </body>
</html>


Respecto al llamado por clase, cuando llamas por medio de la clases hay más de un resultado posible, a diferencia del id que debe ser único e irrepetible. Por lo tanto el resultado de obtenerlo por medio de la clase es un array.

function myFunction() {
    var x = document.getElementsByClassName("example");
    x[0].innerHTML = "hola";
    x[1].innerHTML = "mundo";
}
<div class="example">
  Primer div con class="example".
</div>

<div class="example">
  Segundo div con class="example".
</div>

<button onclick="myFunction()">Click</button>

2
  • Gracias por la respuesta si me sirvió, es la primera ves que uso esta plataforma asi que no se que hacer (darte un like o algo asi ) de todos modos te estoy muy agradecido el 29 jun. 2017 a las 18:40
  • Que bien que te haya servido. Puedes darte el recorrido inicial para ver cómo funciona el sitio. Y aqui puedes ver acerca de las respuestas aceptadas y su utilidad.
    – Rene Limon
    el 29 jun. 2017 a las 19:05

Tu Respuesta

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

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