How to do leverage in Javascript (without jQuery)

Question

How to do leverage in Javascript (without jQuery)

Navigation

#1 by (0 votes)

0

I have a question.

It happens that I want to form an "X" with Javascript: clicking on a div calls a function that interacts with the css and changes the position of other smaller div's and forms an "X". Well, that if I could have done it. My problem is that I want to click on the same div, I want the elements to return to their original form (something like a leverage effect) but I could not achieve it.

I know that jQuery exists and it can also be done with CSS, but I really want to do it with a code that I do in order to learn and not just use libraries. Also, trying to solve this I came across another issue ... Why Javascript only finds the elements if I only call them by the ID ?, try to call them by the class but nothing happens, as if I did not recognize them. Thanks in advance to those who can help me.

 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>

javascript

asked by Frank Campos Vilchez 29.06.2017 в 16:20

source

1 answer

Fill DropBox with XML data Problem when obtaining value from a variable VB.net

score 0 · Accepted Answer

You can put a flag variable that sees the current state of the click, if the animation was already made in a way that is made of the other and vice versa.

 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>

Regarding the call per class, when you call through the classroom there is more than one possible result, unlike the id that must be unique and unrepeatable. Therefore the result of obtaining it by means of the clase is a 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>