2017-10-08 26 views
0

我希望我的图片能够一步一步地左转,直到1300px与jobbra按钮,所以我添加了一个if语句来实现此目的,但这不适用于onlclick。如果我删除if语句,按钮点击功能本身就起作用。我的if语句有什么问题?谢谢如果语句在函数内部不起作用

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>PingPongKép</title> 
     <link rel="stylesheet" href="CSS/style.css"> 
    </head> 

    <body> 

     <div id="ilonakep"> 
      <img src="/img/ilona.jpg" alt="ilona"> 
     </div> 

     <p id="gombok"> 

      <button onclick="balra()">Balra</button> 

      <button onclick="jobbra()">Jobbra</button> 



     </p> 

     <script> 
      var jobbAnim = 1; 
      var speed = 1; 
      var balAnim = 0; 



      function jobbra() { 

      if (jobbAnim < 1300){ 
       var jobbAnim = jobbAnim + speed; 
      } 
      document.getElementById("ilonakep").style.marginLeft = jobbAnim + "px"; 

      } 



      function balra() { 
      document.getElementById("ilonakep").style.marginLeft = balAnim + "px"; 

      } 
     </script> 







</body> 
</html> 
+0

移除内部VAR jobbAnim该变种如果 –

+2

哦男人THX你太棒了。任何想法如何才能使这项工作,直到1300px只需点击一下按钮?谢谢 –

+0

加起来的div的clientWidth和style.margin匹配与1300px –

回答

0

希望,这解决了问题

var jobbAnim = 1; 
 
var speed = 10; 
 
var balAnim = 0; 
 
var max = 80; // 1300 here. 
 
function jobbra() { 
 
    var ilonakep = document.getElementById("ilonakep"); 
 
    if (ilonakep.clientWidth + parseInt(ilonakep.style.marginLeft) < max || ilonakep.style.marginLeft == '') { 
 
     jobbAnim = jobbAnim + speed; 
 
     ilonakep.style.marginLeft = jobbAnim + "px"; 
 
    } else console.log(max+' reached'); 
 
} 
 
function balra() { 
 
    document.getElementById("ilonakep").style.marginLeft = balAnim + "px"; 
 
    jobbAnim = 0; 
 
}
#ilonakep { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #000; 
 
    margin: 0; 
 
}
<div id="ilonakep"> 
 
    <img src="/img/ilona.jpg" alt="ilona"> 
 
</div> 
 
<p id="gombok"> 
 
    <button onclick="balra()">Balra</button> 
 
    <button onclick="jobbra()">Jobbra</button> 
 
</p>

+0

这个不适合我。我认为我必须做出一个For循环,直到1300px。谢谢你的帮助! –

+0

我编辑了答案,并希望这会为你工作。 –

+0

我想将整个div移动到1300px,然后从代码中移除'ilonakep.clientWidth +'。 –