Javascript事件侦听器和数组

我试图重新创建一个刮痕，以显示由3个按钮触发的数组中的3个图像的图像效果。我的事件侦听器不工作，正如您所看到的，无论按什么按钮，它都会显示相同的显示图像。事件侦听器语法让我有点困惑，我想特别得到一些帮助

草图图像覆盖始终相同。你能告诉我哪里出了问题吗

代码太多了，很抱歉，但我认为最好把所有细节都写进去。提前谢谢你

const imgArr=[{
草图：'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
背景1:'https://images.pexels.com/photos/1666012/pexels-photo-1666012.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
草图：'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
背景2:'https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
草图：'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
背景3:'https://images.pexels.com/photos/2365457/pexels-photo-2365457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
]
const btn=document.querySelector（“#special”），
bridge=document.querySelector（“#bridge”），
bridgeCanvas=bridge.getContext（'2d'），
刷径=（桥宽/100）*7；
//默认图像
img=新图像（）；
img.onload=函数（）{
bridgeCanvas.drawImage（img，0，0，bridge.width，bridge.height）；
}
img.src=https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png'
btn.addEventListener（'单击'，（）=>{
img.src=imgArr[background1]。草图
bridge.style.background1=`url（${imgArr[background1].background1}）`；
bridge.style.backgroundSize='封面'；
bridgeCanvas.clearRect（0，0，bridge.width，bridge.height）；
bridgeCanvas.globalCompositeOperation=“目的地结束”；
})
btn.addEventListener（'单击'，（）=>{
img.src=imgArr[background2]。草图
bridge.style.background2=`url（${imgArr[background2].background2}）`；
bridge.style.backgroundSize='封面'；
bridgeCanvas.clearRect（0，0，bridge.width，bridge.height）；
bridgeCanvas.globalCompositeOperation=“目的地结束”；
})
函数getBrushPos（外部参照，yRef）{
const bridgeRect=bridge.getBoundingClientRect（）；
返回{
x:Math.floor（（xRef-bridgeRect.left）/（bridgeRect.right-bridgeRect.left）*bridge.width），
y：数学层（（yRef-bridgeRect.top）/（bridgeRect.bottom-bridgeRect.top）*桥高）
};
}
函数drawDot（mouseX、mouseY）{
bridgeCanvas.beginPath（）；
bridgeCanvas.arc（mouseX，mouseY，brushRadius，0,2*Math.PI，true）；
bridgeCanvas.globalCompositeOperation=“目标输出”；
bridgeCanvas.fill（）；
}
bridge.addEventListener（“mousemove”，（e）=>{
设brushPos=getBrushPos（e.clientX，e.clientY）；
如果（e.which==1）{
drawDot（刷位置x、刷位置y）；
}
}，假）；
bridge.addEventListener（“触摸移动”，函数（e）{
let touch=e.targettouchs[0]；
如果（触摸）{
让brushPos=getBrushPos（touch.pageX，touch.pageY）；
drawDot（刷位置x、刷位置y）；
}
}，假）
正文{
保证金：0；
}
#桥{
保证金：0自动；
背景图像：url（'https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png');
背景图像：-webkit图像集（url（'https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png'）2x）；
背景尺寸：封面；
宽度：100%；
最大宽度：750px；
高度：自动；
光标：十字线；
游标：url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png"53 53,十字准线;；
}
#桥头堡{
文本对齐：居中；
字体系列：Avenir，无衬线；
}
#bridgeContainer figcaption{
边缘顶端：2rem；
}
#特别的{
背景颜色：蓝色；
颜色：白色；
边界：无；
大纲：无；
边界半径：1.5雷姆；
字体大小：较大；
填充：.5rem1rem；
}
#特殊的{
背景颜色：蓝色；
颜色：白色；
边界：无；
大纲：无；
边界半径：1.5雷姆；
字体大小：较大；
填充：.5rem1rem；
}
#特别的{
背景颜色：蓝色；
颜色：白色；
边界：无；
大纲：无；
边界半径：1.5雷姆；
字体大小：较大；
填充：.5rem1rem；
}

颜色1
颜色2
Color3
您的代码中存在多个错误。首先，您试图访问imgArr[background1]，其中background1未定义。相反，您应该尝试通过索引（如0,1,2）进行访问。其他两个按钮没有任何事件侦听器。最后一件事是不要将新图像分配给
bridge.style.background1
您应该将它们分配给
bridge.style.background
。您的草图图像是相同的，因为在imgArr中，所有草图图像都是相同的，即
sketch:'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png“
。请尝试下面的代码片段


const imgArr=[{
草图：'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
背景1:'https://images.pexels.com/photos/1666012/pexels-photo-1666012.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
草图：'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
背景2:'https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
草图：'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
背景3:'https://images.pexels.com/photos/2365457/pexels-photo-2365457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
]
const btn=document.querySelector（“#special”），
btn1=document.querySelector（“#special2”），
btn2=document.querySelector（“#special3”）
bridge=document.querySelector（“#bridge”），
bridgeCanvas=bridge.getContext（'2d'），
刷径=（桥宽/100）*7；
//默认图像
img=新图像（）；
img.onload=函数（）{
bridgeCanvas.drawImage（img，0，0，bridge.width，bridge.height）；
}
img.src=https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png'
btn。