simple javascript animation issue

Question

I was going through this tutorial http://www.schillmania.com/content/projects/javascript-animation-1/ and when I institute the code, I get my div to move 10px to the right, but only once, what if I wanted to keep clicking the button and have it move an additional 10px every time, or if the setTimeout() was instituted shouldnt it keep calling that function and adding an additional 10px ever 20ms? I know it's probably an easy solution, so if anyone could help it would be greatly appreciated. (I'm just learning so no insults).

    <div onclick="invis('one')" id="one"></div>
    <button onclick="domove()">hello</button>
    <div onclick="invis('two')"id="two"></div>
    <div onclick="invis('three')"id="three"></div>

<script type="text/javascript">
    function domove()
        {
            $("one").style.left+=10+'px';
            setTimeout(domove,20);
        }
</script>

I have the #one{} css stylings as follows:

width: 100px;
height: 50px;
float: left;
margin-right: 10px;
background-color: blue;
position: relative;

That works for me. Originally I had it set to: $("one").style.left = ($("one").style.left+10)+'px'; and that was not working for me either. Also I am not using jQuery, I'm trying to learn the basics without it initially. I just like to set the $ character to equal "document.getElementById("")" ... any thoughts about why the above code snippet wouldn't be working correctly? or is there any way to accomplish this without a global? — T110, Feb 23 '12 at 19:49

score 2 · Accepted Answer · edited May 23 '17 at 11:56

2

The problem is with this line:

$("one").style.left+=10+'px';

Does not equate to "increase style.left by 10". It equates to "Append '10px' to syle.left's current value.

This means that style.left is being constantly reset to 10px.

try this:

<script type="text/javascript">
//Global variable to increment every function run
numberOfPixels = 10;
function domove()
    {
        $("one").style.left=numberOfPixels+'px';
        numberOfPixels += 10;
        setTimeout(domove,20);
    }
</script>

Edit: Works fine on this JSFiddle

Opps... forgot to save the latest revision, it works in THIS fiddle. http://jsfiddle.net/CDyQr/1/

Another Edit: User asked in a comment below how to stay out of the global scope. Here is a method using closures:

http://jsfiddle.net/CDyQr/2/

For more info on scope and ways to manipulate it, here is a very detailed Stack Overflow answer:

What is the scope of variables in JavaScript?

edited May 23 '17 at 11:56

Community

1
1

answered Feb 23 '12 at 18:49

Chris Sobolewski

12,819
12
63
96

in fact, if he'd copy-pasted correctly from the tutorial, he would have this line `foo.style.left = (foo.style.left+10)+'px'` – TimCodes.NET Feb 23 '12 at 18:50
True, but then he'd never have run in to this problem and gotten an introduction to variable scoping, appending, and incrementing. I personally like seeing people try to replicate code in their own way. It indicates a desire not to just learn how to do something, but to lean how something works. :) – Chris Sobolewski Feb 23 '12 at 18:52
this is incorrect. your selector is wrong. so this will not work – Henesnarfel Feb 23 '12 at 18:53
True. Just if I was learning from a tutorial and it wasn't working, I'd compare the differences in my version to their version first – TimCodes.NET Feb 23 '12 at 18:54
@Chimoo by using the `$` he more than likely is trying to. I've tried the example above and it does not work. Look at my example its much easier and less code – Henesnarfel Feb 23 '12 at 18:56
Works fine with Moo Tools, which is likely what the OP is using. – Chris Sobolewski Feb 23 '12 at 18:58
If the selector didn't work, surely it would not move at all. The OP says it did move, so it must not be jQuery. Just because someone uses $ doesn't mean its jQuery – TimCodes.NET Feb 23 '12 at 18:58
Yeah, I can name anything I want `$`. Look: $ = function(e){document.getElementById(e)} look, now it works fine. (well, once I implement chaining and everything) – Chris Sobolewski Feb 23 '12 at 19:00
or is there any way to complete the above code that fixes the issue without using a global? – T110 Feb 23 '12 at 19:22
Check out the second example I probided in my answer above. – Chris Sobolewski Feb 23 '12 at 19:56

ddilsaver · Answer 2 · 2012-02-23T19:05:06.830

0

If your using jquery you should get rid of the onclick events and use:

$('#one').click(function(){
  $('#one').css({'right':'+=10px'})
});

I haven't tested this but that's where I would start. I have done something similar before. I just forget how I went about it. JQuery removes the need of using onclick events in almost every case.

I tested this if you surround '+=10px' it works

edited Feb 23 '12 at 19:05

answered Feb 23 '12 at 18:51

ddilsaver

990
3
10
19

score 0 · Answer 3 · answered Feb 23 '12 at 18:51

0

Since it looks like you are using Jquery try this

$( "#one").css( "left","+=10" );

instead of this

$("one").style.left+=10+'px';

see it working here http://jsfiddle.net/TEwvT/

answered Feb 23 '12 at 18:51

Henesnarfel

2,129
1
16
18

simple javascript animation issue

3 Answers3