Question

我无法弄清楚如何将值从一个函数传递到另一个函数。我创建了一个程序，我在其中使用显示在网页中的表单中的值创建框。我正在谈论的值是盒子本身的属性值。

以下是将值分配给框的功能：

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;              
        }                      
      }

这是我在传递值时遇到问题的函数。我需要传递它们，以便在单击每个框时我可以在警告框中显示它们：

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

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

Answer 1

我在JS Fiddle中试过你的例子：http://jsfiddle.net/jCC6n/

我至少看到两个问题。

“counter”未定义，导致代码首次尝试递增时失败。我在函数的顶部添加了一个变量声明。
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' });

请注意，使用onclick事件处理程序的事件处理因浏览器而异。最好使用知道所有差异的JavaScript框架，并为您提供处理事件的统一方法。 jQuery可以说是最常用的这样的框架。

在函数之间传递值的麻烦

1 个答案: