Javascript HTML DOM-新元素取值错误？

我希望能够使用javascript一次创建许多新元素，并为每个新元素提供一个onmousedown（）函数。但是我想输入的变量最终被用于每个元素。我已经设置了一个JSFIDLE来说明问题所在：

for（变量x=0；x<10；x++）
{
var newDiv=document.createElement（'div'）；
newDiv.id=“newDiv”+x；
newDiv.innerHTML=x；
newDiv.onmouseover=函数（）{
变更编号（newDiv，x+1）；
}
var container=document.getElementById（“myDiv”）；
container.appendChild（newDiv）；
}
函数更改编号（obj，newValue）{
obj.innerHTML=newValue；
}

---

我想从中得到的功能是，每个悬停的数字都会将自己的数字增加1。但它们的所有功能都被过度使用，并被更改为全部使用最后一个元素及其编号。如何修复此问题？

for

不包含

块作用域

。因此，浏览器实际上是在对代码执行以下操作（提升）：

var newDiv；
对于（）{…}

这意味着您的变量

newDiv

将在每个循环中使用和重写。当您悬停时，它将使用最后一组

newDiv

，因为它都是相同的变量。您需要使用

函数将其包含到
块范围中。它也会更快

for (var x = 0; x < 10; x++) 
{
loop(x);
}

var loop = function(x) {

 var newDiv = document.createElement('div');
 newDiv.id = "newDiv" + x;
 newDiv.innerHTML = x;
 newDiv.onmouseover = function () {
      changeNumber(newDiv, x + 1);
 }

 var container = document.getElementById("myDiv");
 container.appendChild(newDiv);
};

var changeNumber = function(obj, newValue) { ... }

for（变量x=0；x<10；x++）
{
环（x）；
}
变量循环=函数（x）{
var newDiv=document.createElement（'div'）；
newDiv.id=“newDiv”+x；
newDiv.innerHTML=x；
newDiv.onmouseover=函数（）{
变更编号（newDiv，x+1）；
}
var container=document.getElementById（“myDiv”）；
container.appendChild（newDiv）；
};
var changeNumber=函数（obj，newValue）{…}
就是这样


for（x=1；x参见感谢Arun:）我现在已经在我的真实代码中添加了一堆“函数工厂”。
for (var x = 0; x < 10; x++) 
{
loop(x);
}

var loop = function(x) {

 var newDiv = document.createElement('div');
 newDiv.id = "newDiv" + x;
 newDiv.innerHTML = x;
 newDiv.onmouseover = function () {
      changeNumber(newDiv, x + 1);
 }

 var container = document.getElementById("myDiv");
 container.appendChild(newDiv);
};

var changeNumber = function(obj, newValue) { ... }

for (x = 1; x <= 10; x++) 
{
    var newDiv = document.createElement('div');
    newDiv.id = "newDiv" + x;
    newDiv.innerHTML = x;
    newDiv.onmouseover = function () {
        changeNumber(newDiv, x );
    }

    var container = document.getElementById("myDiv");
    container.appendChild(newDiv);
}

function changeNumber(obj, newValue) {
    obj.innerHTML = newValue;
}