Javascript 尝试使用for循环来缩短js，但得到了；“未定义”；错误

我是javascript的初学者，我正在努力改进：（已经过测试，效果很好）

。。。 ...

等等。。。（共4个）

到一个for循环，该循环可以执行我需要的任何操作，但它说：uncaughtreferenceerror:snail未定义 在window.onload（race4.js:138）中，当我尝试以下代码时：

for(var i = 1; i < 5; i++)
    {
    var s1 = document.createElement("div");
    s1.id = snail+i.id;
    s1.className = "snail-container";
    s1.style.backgroundImage = "url('" + this.snail.photo+ "')";
    s1.style.top = snail+i.y + "px";
    s1.style.left = snail+i.x + "px";
    racetrack.appendChild(s1);

    }

for（变量i=1；i<5；i++）
{
var s1=document.createElement（“div”）；
s1.id=蜗牛+i.id；
s1.className=“蜗牛容器”；
s1.style.backgroundImage=“url（'”+this.snail.photo+”）”；
s1.style.top=蜗牛+i.y+“px”；
s1.style.left=蜗牛+i.x+“px”；
赛马场。附属物（s1）；
}

---

那么我在这里做错了什么呢？

我发现

snail+I.x

有问题，请将其更正为

this[“snail”+I].x

（这样您就可以访问

snail1

，

snail2

等），类似地，其他地方的问题如下：

for(var i = 1; i < 5; i++)
    {
    var s1 = document.createElement("div");
    s1.id = this["snail"+i].id;
    s1.className = "snail-container";
    s1.style.backgroundImage = "url('" + this.snail.photo+ "')";
    s1.style.top = this["snail"+i].y + "px";
    s1.style.left = this["snail"+i].x + "px";
    racetrack.appendChild(s1);

    }

for（变量i=1；i<5；i++）
{
var s1=document.createElement（“div”）；
s1.id=this[“snail”+i].id；
s1.className=“蜗牛容器”；
s1.style.backgroundImage=“url（'”+this.snail.photo+”）”；
s1.style.top=this[“snail”+i].y+“px”；
s1.style.left=this[“snail”+i].x+“px”；
赛马场。附属物（s1）；
}

我发现

snail+I.x

有问题，请将其更正为

this[“snail”+I].x

（这样您就可以访问

snail1

，

snail2

等），类似地，其他地方的问题如下：

for(var i = 1; i < 5; i++)
    {
    var s1 = document.createElement("div");
    s1.id = this["snail"+i].id;
    s1.className = "snail-container";
    s1.style.backgroundImage = "url('" + this.snail.photo+ "')";
    s1.style.top = this["snail"+i].y + "px";
    s1.style.left = this["snail"+i].x + "px";
    racetrack.appendChild(s1);

    }

for（变量i=1；i<5；i++）
{
var s1=document.createElement（“div”）；
s1.id=this[“snail”+i].id；
s1.className=“蜗牛容器”；
s1.style.backgroundImage=“url（'”+this.snail.photo+”）”；
s1.style.top=this[“snail”+i].y+“px”；
s1.style.left=this[“snail”+i].x+“px”；
赛马场。附属物（s1）；
}

您应该使用

数组

或

对象文字

来保存蜗牛的列表并存储它们的属性，然后迭代创建这些元素

这里有一种方法可以解决这个问题：

var racetrack=document.getElementById（“racetrack”）；
//创建所有蜗牛及其属性的“地图”
变种蜗牛={
"1": {
id:1，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:10，
x:10
},
"2": {
id:2，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:20，
x:20
},
"3": {
id:3，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:30，
x:30
},
"4": {
id:4，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:40，
x:40
}
};
for（var i=0；i

.snail容器{
宽度：130px；
高度：95px；
背景尺寸：封面；
边缘底部：15px；
}

---

您应该使用

数组

或

对象文本

来保存蜗牛的列表并存储它们的属性，然后迭代创建这些元素

这里有一种方法可以解决这个问题：

var racetrack=document.getElementById（“racetrack”）；
//创建所有蜗牛及其属性的“地图”
变种蜗牛={
"1": {
id:1，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:10，
x:10
},
"2": {
id:2，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:20，
x:20
},
"3": {
id:3，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:30，
x:30
},
"4": {
id:4，
照片:
"https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
y:40，
x:40
}
};
for（var i=0；i

.snail容器{
宽度：130px；
高度：95px；
背景尺寸：封面；
边缘底部：15px；
}

---

什么是蜗牛？一个物体？数组？

s1.id=document.getElementById（'snail'+i）.id

；您好，KHS，您似乎正在尝试使用

snail+i.id

动态获取

snail[number].id

。这将像这样执行：

（snail）+（i.id）

，因为

i

只是一个数字，所以不能对其调用

.id

。我建议您使用以下键创建一个名为

snails

的对象：

var snails={'1'：'which snail 1'，'2'：'which snail 2'}

，并使用

s1.id=snails[i]

？请确保使用正确的数据替换

任何snail 1/2

等。使用ABGR的解决方案，我的代码现在可以工作了，您的解释帮助我理解了原因，因此感谢SidOfc:）什么是

snail

？一个物体？数组？

s1.id=document.getElementById（'snail'+i）.id

；您好，KHS，您似乎正在尝试使用

snail+i.id

动态获取

snail[number].id

。这将像