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

Question

我走在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 + "."); 
} 

Answer 1

由于下面的代码的：

div.onclick = display 

的display功能在div对象的上下文中运行响应于click事件。此时，this.id属性（认为div.id）包含您分配给它的值。但其他值：this.xpos和this.ypos不包含您打算分配给它们的值。

你的代码看起来它要在Box对象的上下文中运行display。您需要在某个时刻创建新的Box并为其分配值。你可以做到这一点的方法之一是通过更换：

div.onclick = display 

有：

div.box = new Box(id, name, color, xpos, ypos); 
div.onclick = function() { display.call(this.box); }; 

这不是你想要的，但它告诉你一些机制，最彻底的方法，你会希望能够以此作为出发点。