Javascript按钮打开一个模式；按钮不存在'；在列表中时不工作

基本上，我想按下一个按钮（与一个人匹配），弹出另一个页面的一个图标（现在使用的是一个模式），该图标会根据它是谁而有所不同。我使用的是w3school的基本模板，我可以使用一个按钮，但是当我尝试在列表中添加一个按钮来匹配一个人时，模式不会打开。显然，每个按钮分配给一个人，他们需要有自己的元素id，但为什么我连一个按钮都不能工作呢？ 这是下面代码片段中的“在地图上显示”按钮。 最上面的“在地图上显示”按钮的工作原理是，它显示模式，但列表中的相同按钮不起任何作用

先谢谢你

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

/*桌面*/
/*模态（背景）*/
@媒体屏幕和屏幕（最小宽度：801px）{
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：隐藏；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,4）；
/*黑色w/不透明度*/
-webkit动画名称：fadeIn；
/*淡入背景*/
-webkit动画持续时间：0.4s；
动画名称：fadeIn；
动画持续时间：0.4s
}
/*模态内容*/
.模态内容{
位置：相对位置；
底部：0；
背景色：清晰；
宽度：500px；
高度：700px；
保证金：0%自动15%自动；
/*顶部5%，底部15%，居中*/
-webkit动画名称：slideIn；
-webkit动画持续时间：0.4s；
动画名称：slideIn；
动画持续时间：0.4s；
边框：实心2px；
边框颜色：#ffc948；
溢出：隐藏；
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#640006；
颜色：白色；
高度：2米；
}
.模态体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
/*添加动画*/
@-webkit关键帧幻灯片{
从{
底部：-300px；
不透明度：0
}
到{
底部：0；
不透明度：1
}
}
@关键帧幻灯片{
从{
底部：-300px；
不透明度：0
}
到{
底部：0；
不透明度：1
}
}
@-webkit关键帧fadeIn{
从{
不透明度：0
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：0
}
到{
不透明度：1
}
}
* {
保证金：0；
填充：0；
-webkit框大小：边框框；
}
}
/*流动的*/
/*模态（背景）*/
@媒体屏幕和屏幕（最大宽度：800px）{
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：隐藏；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,4）；
/*黑色w/不透明度*/
-webkit动画名称：fadeIn；
/*淡入背景*/
-webkit动画持续时间：0.4s；
动画名称：fadeIn；
动画持续时间：0.4s
}
/*模态内容*/
.模态内容{
位置：相对位置；
底部：0；
背景色：清晰；
宽度：500px；
高度：700px；
保证金：0%自动15%自动；
/*顶部5%，底部15%，居中*/
-webkit动画名称：slideIn；
-webkit动画持续时间：0.4s；
动画名称：slideIn；
动画持续时间：0.4s；
边框：实心2px；
边框颜色：#ffc948；
溢出：隐藏；
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#640006；
颜色：白色；
高度：2米；
}
.模态体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
/*添加动画*/
@-webkit关键帧幻灯片{
从{
底部：-300px；
不透明度：0
}
到{
底部：0；
不透明度：1
}
}
@关键帧幻灯片{
从{
底部：-300px；
不透明度：0
}
到{
底部：0；
不透明度：1
}
}
@-webkit关键帧fadeIn{
从{
不透明度：0
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：0
}
到{
不透明度：1
}
}
* {
保证金：0；
填充：0；
-webkit框大小：边框框；
}
}
html，
身体{
身高：100%；
宽度：100%；
溢出：隐藏；
背景色：#810008；
}
a、 菜单链接{
颜色：#ffc948；
显示：块；
文字装饰：无；
填充顶部：25px；
}
.菜单链接范围{
边框底部：实心3px#000；
边框顶部：双10px#000；
显示：内联块；
高度：4px；
保证金：0 5px-3 px 0；
宽度：30px；
}
.菜单链接：悬停范围{
边框颜色
var elements = document.getElementsByClassName('showModalButton');

for(var i = 0; i < elements.length; ++i) {
    elements[i].onclick = function() {
        modal.style.display = "block";
       }
}