Javascript 函数之间传递值的问题

我很难弄清楚如何将值从一个函数传递到另一个函数。我创建了一个程序，在这个程序中，我使用网页中显示的表单中的值创建框。我所说的值是框本身的属性值

以下是将值分配给框的函数：

function addBox(newbox) {  
       for (var i = 0; i < newbox.number; i++) { 
       counter++;
       var id = counter;                          
       var scene = document.getElementById("scene");              
       var div = document.createElement("div"); 
       div.value = id;
       console.log(div.value);                  
       div.className += " " + "box"; 
       div.innerHTML += newbox.name; 
       div.style.backgroundColor = newbox.color; 
       var x = Math.floor(Math.random() * (scene.offsetWidth-101));
       var y = Math.floor(Math.random() * (scene.offsetHeight-101));
       div.style.left = x + "px";
       div.style.top = y + "px"; 
       scene.appendChild(div); 
       div.onclick = display;              
        }                      
      }

---

到目前为止，当我点击它时，我只是在警报框中得到一对空括号

我在JS Fiddle中尝试了你的例子：

我发现至少有两个问题

“计数器”未定义，这会导致代码在首次尝试递增时失败。我在函数顶部添加了一个变量声明

toSource未定义。我将其替换为“outerHTML”，它可以在Chrome、IE和其他浏览器中使用

有了以上的改变，这就奏效了

function display(e) {
    alert(e.target.outerHTML);
}

function addBox(newbox) {  
    var counter = 0;
    for (var i = 0; i < newbox.number; i++) { 
        counter++;
        var id = counter;                          
        var scene = document.getElementById("scene");              
        var div = document.createElement("div"); 
        div.value = id;
        div.className += " " + "box"; 
        div.innerHTML += newbox.name; 
        div.style.backgroundColor = newbox.color; 
        var x = Math.floor(Math.random() * (scene.offsetWidth-101));
        var y = Math.floor(Math.random() * (scene.offsetHeight-101));
        //div.style.left = x + "px";
        //div.style.top = y + "px"; 
        scene.appendChild(div); 
        div.onclick = display;              
    }                      
}

addBox({ number: 3, name: "Hello", color: '#C00' });

功能显示（e）{
警报（例如，target.outerHTML）；
}
函数addBox（newbox）{
var计数器=0；
对于（var i=0；i

请注意，使用onclick事件处理程序的事件处理因浏览器而异。最好使用一个JavaScript框架，该框架了解所有差异，并为您提供处理事件的统一方法。jQuery可以说是此类框架中使用最多的

function display(e) {
    alert(e.target.outerHTML);
}

function addBox(newbox) {  
    var counter = 0;
    for (var i = 0; i < newbox.number; i++) { 
        counter++;
        var id = counter;                          
        var scene = document.getElementById("scene");              
        var div = document.createElement("div"); 
        div.value = id;
        div.className += " " + "box"; 
        div.innerHTML += newbox.name; 
        div.style.backgroundColor = newbox.color; 
        var x = Math.floor(Math.random() * (scene.offsetWidth-101));
        var y = Math.floor(Math.random() * (scene.offsetHeight-101));
        //div.style.left = x + "px";
        //div.style.top = y + "px"; 
        scene.appendChild(div); 
        div.onclick = display;              
    }                      
}

addBox({ number: 3, name: "Hello", color: '#C00' });