3 Replies - 214 Views - Last Post: 22 October 2017 - 02:38 PM

#1 cop77  Icon User is offline

  • New D.I.C Head

Reputation: -3
  • View blog
  • Posts: 30
  • Joined: 22-May 16

I can move object one way but not the other way

Posted 22 October 2017 - 08:31 AM

Hi, I am new to javascript so maybe that's why such a simple problem seems so hard.
My problem is I have an object and when I click the button it moves 490px. Now when I click the button again I want it to move 490px back to where it was. My code looks like this:
function flyvMedJavascript() {
var dronen = document.getElementById('flyingDroneImage');

var pos = 0;
chooseFunction = frameS;

var myInterval = setInterval(chooseFunction, 5);
function frameS(){
	
	if(pos == 490) {
		clearInterval(myInterval);
		chooseFunction = frameF;
	}
	
	pos++;
	
	dronen.style.left = pos + "px";

}

function frameF(){
	
	if(pos == 0) {
		clearInterval(myInterval);
		chooseFunction = frameS;
	}
	
	pos--;
	
	dronen.style.left = pos + "px";

}

}


Now the code works fine when I click the button the first time and it move the object to the right. But when I click the button again it doesn't move it to the left until it reach where it started. Instead it place the object back on pos 0 and move it right again? What in the world do I do wrong?

Is This A Good Question/Topic? 0
  • +

Replies To: I can move object one way but not the other way

#2 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3716
  • View blog
  • Posts: 13,476
  • Joined: 08-August 08

Re: I can move object one way but not the other way

Posted 22 October 2017 - 09:12 AM

You could use css and change the class to move the object. :
https://webdesign.tu...-webdesign-4975

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #myBox {
            position: absolute;;
            background: red;
            width: 50px;
            height: 50px;
            transition: 2s ease-in;
        }
        .startPos {
            top: 10px;
            left: 10px;
        }

        .endPos {
            top: 100px;
            left: 500px;
        }
    </style>
    <script>
        function move() {
            var box = document.getElementById('myBox');
            box.className = (box.className == 'startPos') ? 'endPos' : 'startPos';
        }
    </script>
</head>
<body>
<div id="myBox" class="startPos" onclick="move();"></div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#3 cop77  Icon User is offline

  • New D.I.C Head

Reputation: -3
  • View blog
  • Posts: 30
  • Joined: 22-May 16

Re: I can move object one way but not the other way

Posted 22 October 2017 - 10:08 AM

Thanks for your reply, but if I can move it one way, it should be easy to turn the values so it goes the other way. The thing is it only seem that one of the functions are executed, and I have no idea why?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6382
  • View blog
  • Posts: 25,781
  • Joined: 12-December 12

Re: I can move object one way but not the other way

Posted 22 October 2017 - 02:38 PM

On line 12 you are changing chooseFunction but this does not reset the interval.

Put it this way: you've cleared the interval, to start another function after an interval you need to call setInterval again.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1