Javascript function doesn't work, simple code [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed last year.

Improve this question

Quite simple code below doesn't work. No idea why, JS function to move image smoothly. Help would be great, I tried almost everything.

Code ready to copy paste to php script and test it.

<?php
echo "

<script type='text/javascript'>

var img = document.getElementById( 'test' );

function translate( elem, x, y ) {
    var left = 120,
        top = 120,
        dx = left - x,
        dy = top - y,
        i = 1,
        count = 20,
        delay = 20;

    function loop() {
        if ( i >= count ) { return; }
        i += 1;
        elem.style.left = ( left - ( dx * i / count ) ).toFixed( 0 ) + 'px';
        elem.style.top = ( top - ( dy * i / count ) ).toFixed( 0 ) + 'px';
        setTimeout( loop, delay );
    }

    loop();
}

</script>
";
echo '
</head>
<body>
  <img id="test" src="http://placekitten.com/100/100" style="position:absolute; left:120px; top:120px;">


<a href="#" onclick="translate(\'test\', 30 , 30)">Translate to (0, 200)</a>

</body>
';
?>

Why are you using echo to print out the html/js? You can just close the php tag. — Devin Lynch
– Devin Lynch, Commented Apr 11, 2013 at 2:41
already tryed that, writing javascript outside php same result as here — John
– John, Commented Apr 11, 2013 at 2:41
Also, "doesn't work" is the most vague description. What about it is not working? You are seeing errors in your console, or the results are not expected? — Devin Lynch
– Devin Lynch, Commented Apr 11, 2013 at 2:42
problem is i dont know how to debug javascript, and i dont need to write javascript code often so i need little fix here and im done with JS ;) — John
– John, Commented Apr 11, 2013 at 2:43

enhzflep · Accepted Answer · 2015-10-13 14:02:03Z

-1

<!doctype html>
<html>
<head>
<script type='text/javascript'>

function byId(e){return document.getElementById(e);}

function translate( elem, x, y ) {
    var left = 120,
        top = 120,
        dx = left - x,
        dy = top - y,
        i = 1,
        count = 20,
        delay = 20;

    function loop() 
    {
        if ( i >= count ) 
            return;
        i += 1;
        elem.style.left = ( left - ( dx * i / count ) ).toFixed( 0 ) + 'px';
        elem.style.top = ( top - ( dy * i / count ) ).toFixed( 0 ) + 'px';
        setTimeout( loop, delay );
    }
    loop();
}

window.addEventListener('load', myInit, false);

function myInit()
{
    byId('myAnchor').addEventListener('click', handleLinkClick, false);
}

function handleLinkClick(evt)
{
    //translate(byId('test'), 30, 30);  // only works on the #test target.
    translate(this, 30, 30);  // makes the handler work for any element it's attached to.
}
</script>
</head>
<body>
  <img id="test" src="http://placekitten.com/100/100" style="position:absolute; left:120px; top:120px;">
  <a id='myAnchor' href="#">Translate to (0, 200)</a>
</body>
</html>

edited Oct 13, 2015 at 14:02

answered Apr 11, 2013 at 3:20

enhzflep

13.2k2 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Over a year ago

Man you are amazing :) working like charm. Im curious why u need to add this two functions?

John Over a year ago

there is one problem, you not using <a href="#">link</a> to move the image. That is crucial for this code. Easy fix?

John Over a year ago

got it :) add to <a onclick="handleLinkClick()" and comment out addEventListener('click', handleLinkClick, false);

enhzflep Over a year ago

Oh yes, of course. Sorry, I seem to have lost the id attribute from the anchor. I'll update the code in a second. I added the functions like this, because (a) you know which element triggered the event automatically if you use addEventListener (the this keyword in the function refers to the element that triggered the event) (b) Because you can add multiple event handlers to a single event on a single element. You can also remove single events.

Collectives™ on Stack Overflow

Javascript function doesn't work, simple code [closed]

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related