Member Avatar for m1n1m3

Hi!


I have a function that i like to move 2 image objects around. (it works with 1)

But im getting errors while im trying to pass multiple object id-s.
I believe example will tell you more.

<script>
function Init()
{
   document.getElementById('pilt_kivi').style.left = x + 'px';
   document.getElementById('pilt_kivi').style.top = y + 'px';
   
   document.getElementById('flip').style.left = x2 + 'px';
   document.getElementById('flip').style.top = y2 + 'px';
}


function move(obj,obj2) 
{   
    obj.style.top=  amount;
    obj2.style.top= amount;

...

[U]There is a problem:[/U]
[B]window.setTimeout("move(" +obj.id+,obj2.id+ ");",10); [/B]

}
</script>

<body>

<a href="javascript:Liiguta(pilt_kivi,flip)">move</a><br>


[U]There are 2 objects pilt_kivi and flip:[/U]
<img class="image" id="pilt_kivi" src="paper.gif"/>
<img class="image" id="flip" src="paper.gif"/>

</body>

Thank you in advance!

  • 2 Contributors
  • 2 Replies
  • 257 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by m1n1m3

Dani AI

Generated

Short summary: the runtime error came from building a string for a delayed call and relying on identifier names instead of element references. 's quick fix fixed the immediate string-concatenation bug, but the safer approach is to pass DOM elements (or element IDs) directly and avoid string evaluation with setTimeout.

A minimal, safer pattern — get element references once, pass them to the mover, and schedule using a function (no string eval):

var a = document.querySelector('#pilt_kivi');
var b = document.querySelector('#flip');

function moveTwo(elA, elB) {
  var topA = parseFloat(getComputedStyle(elA).top) || 0;
  var topB = parseFloat(getComputedStyle(elB).top) || 0;
  var delta = 2; // pixels per step
  elA.style.top = (topA + delta) + 'px';
  elB.style.top = (topB + delta) + 'px';
  window.setTimeout(function(){ moveTwo(elA, elB); }, 10);
}

For smoother, more efficient animation prefer requestAnimationFrame over setTimeout:

function animate(elA, elB) {
  function step() {
    moveTwo(elA, elB);
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

Additional notes and troubleshooting

  • Do not rely on browser-created global variables for element IDs (calling Liiguta(pilt_kivi,flip) from an href can break in some browsers). Resolve elements with selectors or getElementById and pass references.
  • Avoid passing raw ID strings into a stringified setTimeout; that requires extra quoting and eval-like behavior.
  • Use getComputedStyle/parseFloat when reading numeric style values.
  • Prefer attaching events with addEventListener rather than inline javascript in href attributes.

These steps make the code clearer, avoid scope/eval issues, and give better performance for animation.

Recommended Answers

All 2 Replies

Member Avatar for Taywin

The problem is that you didn't do it in a string way. :)

window.setTimeout("move(" +obj.id+","+obj2.id+ ");",10);
Member Avatar for m1n1m3

Thank you!

You solved my problem in seconds.

I guess i was too under experienced to see obvious :D.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.