如何将变量值从一个函数传递给另一个函数

我正在上JavaScript课，这是我的最后一个项目。因此，我是javascript新手。

该应用程序要求用户提供要创建的“盒子”的名称，颜色和数量。创建它们之后，用户可以单击一个框以获取一条消息，指出其ID，名称，颜色以及该框的顶部位置（XPOS）和左侧位置（YPOS）。

我现在得到的一切都是正确的，除了XPOS和YPOS出现未定义。如果我将display（）函数中的this.xpos和this.ypos替换为xpos和ypos，我将获得创建的最后一个框的值。

在我（未经训练的人）看来，ID和XPOS，YPOS的创建是相似的，并且应该可以相同地工作。那么，为什么ID正确显示而不显示2个位置变量？任何帮助，将不胜感激。

var name;
var id;
var color;
var amount;
var xpos = 0;
var ypos = 0;

function Box(id, name, color, xpos, ypos) {     //element constructor function
   this.id = id;
   this.name = name;
   this.color = color;
   this.xpos = xpos;
   this.ypos = ypos;
}
var box
var boxes = [];
var counter = 0;

window.onload = init;

function init() {
   var generateButton = document.getElementById("generateButton");
   generateButton.onclick = generate;

   var clearButton = document.getElementById("clearButton");
   clearButton.onclick = clear;
}

function generate() {
   var dataForm = document.forms.data;              //create var for the form collection
   var nameInput = document.getElementById("name");     //get text input for name of Amazing Boxes
   name = nameInput.value;
   if(name == null || name == "") {             //check to see if the input box is empty
         alert("***Please enter valid text for a name***"); //if it is empty, alert user
         nameInput.focus();
         return;
      }  

   var colorList = dataForm.elements.color;         //get color choice for Amazing Boxes
   color = colorList.value;

   var radioPick = dataForm.elements.amount;            //get the choice for number of Amazing Boxes
      for(var i = 0; i < radioPick.length; i++) {
         if (radioPick[i].checked) {
         amount = radioPick[i].value;
         }
      }      
         if(amount == null || amount == "") {                   //test to make sure the user has checked an amount
            alert("***Please choose an amount of boxes to be generated***");
            return false;
         }
         else {   
            while(amount > 0) {
               var sceneDiv = document.getElementById("scene");
               xpos = Math.floor(Math.random() * (sceneDiv.offsetWidth-101));   //get a random number for box position
               ypos = Math.floor(Math.random() * (sceneDiv.offsetHeight-101));  //get a random number for box position
               id = counter;
               var div = document.createElement("div");             //create new div element
               div.setAttribute("id", id);                  //give the new div an id = to the var id
               div.setAttribute("class", "box");                    //give the new div a class = to box
               div.innerText = name;                        //set text on box to the name
               sceneDiv.appendChild(div);                       //make the new div a child element of the scene div
               div.style.left = xpos + "px";
               div.style.top = ypos + "px";
               div.style.backgroundColor = color;
               div.onclick = display;
               counter ++;                          //increment counter var to get different box ids
               amount--;
            }
         }
         dataForm.reset();
         nameInput.focus();
}

function display() {
   alert("The ID of this box is " + this.id + " and it is named " + name + ".  It's color is " + color +
          " and is located at " + this.xpos + " and " + this.ypos + ".");
}