Question

所以我的目标是在Javascript中创建一个随机在页面上放置几个div的函数。最终，我想用图片填充这些div，以便创建图片被随机抛在桌子上的想法。我想出了一个for循环，它现在有效，但我不明白为什么它之前没有用。

var wrapper = document.getElementById("wrapper");
var xvalue;
var yvalue;

for (var i = 0; i < 3; i++) {
  var newDiv = document.createElement("div");
  xvalue = Math.floor(Math.random() * 400);
  yvalue = Math.floor(Math.random() * 400);
  newDiv.setAttribute("class", "frame");
  newDiv.style.top = yvalue+"px";
  newDiv.style.left = xvalue+"px";
  wrapper.appendChild(newDiv);
}

之前，我已经移动了这一行：

var newDiv = document.createElement("div");

到实际的for循环之前。因为它只用于创建一个新的div，我想我也可以在循环之外声明变量。但是，这样做会导致它在同一位置生成相同的div 三次次。通常我理解为什么固定变量如果放在for循环之外会产生相同的结果，但在这里我不明白为什么。

提前致谢！

大安

Answer 1

如果你把

var newDiv = document.createElement("div");

在循环之外，你只需要一个对象并在三个周期内操作它。你不会有三个对象......

顺便说一句，将代码中的所有var移至顶部而不进行分配（请参阅下面的代码）。

变量声明被提升到顶部！

More about hoisting here.

您的代码看起来与其行为不同。通过将所有var置于顶部，它看起来就像它实际工作的那样，而且更好（理解和调试）。

您更正后的代码为：

var i, newDiv, xvalue, yvalue, wrapper;

wrapper = document.getElementById("wrapper");

for (i = 0; i < 3; i++) {
  newDiv = document.createElement("div");
  xvalue = Math.floor(Math.random() * 400);
  yvalue = Math.floor(Math.random() * 400);
  newDiv.setAttribute("class", "frame");
  newDiv.style.top = yvalue + "px";
  newDiv.style.left = xvalue + "px";
  wrapper.appendChild(newDiv);
}

为什么这个特定的Javascript循环仅在重新分配变量时有效？

1 个答案: