JavaScript附加

我对编码完全是新手，所以如果我这里有一些愚蠢的代码

我想用API和JavaScript创建一个图库。从API加载10幅图片，当我们点击每幅图片时，旁边会显示更大的版本。我已经有了加载图片的API，但是一旦我点击它们，什么都没有发生

代码如下：

EX-4
身体{
字体系列：arial；
}
#内容{
宽度：200px；
高度：200px；
边框：1px实心#000；
}
.bodyblue{
背景：#000；
颜色：#fff；
}
.fullImage{
位置：绝对位置；
顶部：140px；
宽度：550px；
高度：100px；
填充：20px 10px；
文本对齐：居中；
保证金：0自动；
左：0；
右：0；
显示：无；
}
h1{
变换原点：50%50%；
字体大小：50px；
字体系列：“Sigmar One”，草书；
光标：指针；
z指数：2；
位置：绝对位置；
排名：0；
文本对齐：居中；
宽度：100%；
}
全屏
祝贺
变量图像=[
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
'https://picsum.photos/200/300/?random',
];
var指数=0；
var超时；
函数buildImage（）{
document.getElementById（'content'）.style.backgroundImage='url（'+images[index]+'）；
}
函数changeImage（）{
索引++；
如果（索引>=images.length）{
指数=0；
}
document.getElementById（'content'）.style.backgroundImage='url（'+images[index]+（index+1）+'）；
}
函数全屏（）{
document.getElementById（'fullImage'）.style.backgroundImage='url（'+images[index]+'）；
}

我重构了一些东西，但下面是一个工作示例：

EX-4
身体{
字体系列：arial；
位置：相对位置；
}
#内容{
显示：内联块；
宽度：200px；
高度：200px；
边框：1px实心#000；
}
.bodyblue{
背景：#000；
颜色：#fff；
}
.fullImage{
显示：内联块；
宽度：200px；
高度：300px；
边框：1px实心#000；
}
h1{
变换原点：50%50%；
字体大小：50px；
字体系列：“Sigmar One”，草书；
光标：指针；
z指数：2；
位置：绝对位置；
排名：0；
文本对齐：居中；
宽度：100%；
}

全屏

变量图像=[
'https://picsum.photos/200/300/?image=1',
'https://picsum.photos/200/300/?image=2',
'https://picsum.photos/200/300/?image=3',
'https://picsum.photos/200/300/?image=4',
'https://picsum.photos/200/300/?image=5',
'https://picsum.photos/200/300/?image=6',
'https://picsum.photos/200/300/?image=7',
'https://picsum.photos/200/300/?image=8',
'https://picsum.photos/200/300/?image=9',
'https://picsum.photos/200/300/?image=10'
];
var currentIndex=0；
var content=document.getElementById（'content'）；
var full=document.getElementById（'fullImage'）；
var fullButton=document.getElementById（'fullscreenButton'）；
content.addEventListener（'click'，function（））{
currentIndex=currentIndex>=images.length-1？0:currentIndex+1；
content.style.backgroundImage=`url（${images[currentIndex]}）`；
});
fullButton.addEventListener（'单击'，函数（））{
full.style.backgroundImage=`url（${images[currentIndex]}）`；
});
content.style.backgroundImage=`url（${images[currentIndex]}）`；

我重构了一些东西，但下面是一个工作示例：

EX-4
身体{
字体系列：arial；
位置：相对位置；
}
#内容{
显示：内联块；
宽度：200px；
高度：200px；
边框：1px实心#000；
}
.bodyblue{
背景：#000；
颜色：#fff；
}
.fullImage{
显示：内联块；
宽度：200px；
高度：300px；
边框：1px实心#000；
}
h1{
变换原点：50%50%；
字体大小：50px；
字体系列：“Sigmar One”，草书；
光标：指针；
z指数：2；
位置：绝对位置；
排名：0；
文本对齐：居中；
宽度：100%；
}

全屏

变量图像=[
'https://picsum.photos/200/300/?image=1',
'https://picsum.photos/200/300/?image=2',
'https://picsum.photos/200/300/?image=3',
'https://picsum.photos/200/300/?image=4',
'https://picsum.photos/200/300/?image=5',
'https://picsum.photos/200/300/?image=6',
'https://picsum.photos/200/300/?image=7',
'https://picsum.photos/200/300/?image=8',
'https://picsum.photos/200/300/?image=9',
'https://picsum.photos/200/300/?image=10'
];
var currentIndex=0；
var content=document.getElementById（'content'）；
var full=document.getElementById（'fullImage'）；
var fullButton=document.getElementById（'fullscreenButton'）；
content.addEventListener（'click'，function（））{
currentIndex=currentIndex>=images.length-1？0:currentIndex+1；
content.style.backgroundImage=`url（${images[currentIndex]}）`；
});
fullButton.addEventListener（'单击'，函数（））{
full.style.backgroundImage=`url（${images[currentIndex]}）`；
});
content.style.backgroundImage=`url（${images[currentIndex]}）`；

我看不到任何单击事件