Je veux pouvoir cliquer sur un bouton et changer une valeur de div donnée en% pour déplacer le div hors de l'écran en un clic.

Cependant, le code ci-dessous ne produit aucun résultat lorsque l'utilisateur clique sur le bouton. J'apprécie vraiment tous les conseils que je peux obtenir.

function Shift() {
  var x = document.getElementById("Lac");
  if (x.style.left === "0%" && x.style.top === "0%") {
    x.style.left = "100%";
    x.style.top = "100%";
  }
}
#Lac {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  left: 0%;
  top: 0%;
  background-color: #0062FF;
  transition-duration: 0.3s;
}
<div id="Lac">
  <button onclick="Shift()">Button</button>
</div>
0
Ike10 9 juil. 2015 à 10:48

2 réponses

Meilleure réponse

Solution 1: je vous suggère de supprimer l'instruction if. Cela ne sert à rien.

function Shift() {
  var x = document.getElementById("Lac");
  x.style.left = "100%";
  x.style.top = "100%";
}
#Lac {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  left: 0%;
  top: 0%;
  background-color: #0062FF;
  transition-duration: 0.3s;
}
<div id="Lac">
  <button onclick="Shift()">Button</button>
</div>

Solution 2: ajoutez un nom de classe au lieu de tout ce JavaScript.

#Lac {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  left: 0%;
  top: 0%;
  background-color: #0062FF;
  transition-duration: 0.3s;
}
#Lac.hide {
  left: 100%;
  top: 100%;
}
<div id="Lac">
  <button onclick="this.parentNode.className='hide';">Button</button>
</div>
0
Samuel Liew 10 juil. 2015 à 20:11

Vous ne pouvez pas récupérer la valeur de .style.left, vous devez effectuer les opérations suivantes:

 var style = window.getComputedStyle(document.getElementById("Lac"))
 console.log(style.left); //outputs 0px
 var left = parseInt(style.left); //0
if ( !left ){
    //do the animation
}
0
Jad Joubran 10 juil. 2015 à 20:13