I don't understand the moveElement() function read in the DOM Scripting book ?

This site is best viewed in a modern browser with JavaScript enabled.

I don't understand the moveElement() function read in the DOM Scripting book ?

thisisabanana

Here's the code:

function moveElement(elementID,final_x,final_y,interval) { 
  if (!document.getElementById) return false; 
  if (!document.getElementById(elementID)) return false; 
  var elem = document.getElementById(elementID);
  if (elem.movement) { 
    clearTimeout(elem.movement);
  } 
  if (!elem.style.left) {
    elem.style.left = "0px";
  } 
  if (!elem.style.top) {
    elem.style.top = "0px";
  } 
  var xpos = parseInt(elem.style.left); 
  var ypos = parseInt(elem.style.top); 

  if (xpos == final_x && ypos == final_y) {
    return true;
  } 

  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10); 
    xpos = xpos + dist;
  } 

  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10); 
    xpos = xpos - dist;
  } 

  if (ypos < final_y) {
   var dist = Math.ceil((final_y - ypos)/10); 
   ypos = ypos + dist;
  } 

  if (ypos > final_y) {
   var dist = Math.ceil((ypos - final_y)/10); 
   ypos = ypos - dist;
  } 
  elem.style.left = xpos + "px"; 
  elem.style.top = ypos + "px"; 
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 
  elem.movement = setTimeout(repeat,interval);
}

Now, what I don't understand is this :

  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

Why are there so many plus signs?
Thanks in advance.

007Julien

There are so many + sign to concatenate strings, like : "moveElement('" or "'," or ")", and values of different variables elementID, final_x, final_y and interval to ensure a new call of the function moveElement, after interval milliseconds.

Without this device, arguments (local variables in the function) would no longer be valid when calling the function.

An other method to solve this problem is to call an anonymous function which call the function with arguments. In this case the values of the arguments are contained in the definition of the function.

  elem.movement = setTimeout(function(){moveElement(elementID,final_x,final_y,interval)},interval);