Question

我正在上javascript课程，这是我的最后一个项目。所以我是javascript的新手。

应用程序要求用户输入要创建的“框”的名称，颜色和数量。创建它们之后，用户可以单击一个框以获取一条消息，指出其ID，NAME，COLOR以及该框的顶部位置（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不包含您打算分配给它们的值。

您的代码看起来好像要在display对象的上下文中运行Box。您需要在某个时刻创建一个新的Box并为其指定值。你可以这样做的一种方法是替换：

div.onclick = display

使用：

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

这不是做你想做的最干净的方法，但它会向你展示一些机制，你希望能够将它作为一个起点。

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

1 个答案: