我想将HTML元素连接到javascript对象

对于页面上的每个产品元素，我想创建一个具有title、description和price属性的关联JavaScript对象。单击时，应显示基于HTML模板的模式，其中包含由这些属性填充的字段

这是我目前的代码：

document.getElementByIdred.onclick=函数{functionRed}； document.getElementByIdyellow.onclick=function{functionYellow}； document.getElementByIdblue.onclick=函数{functionBlue}； //创建一个对象： var Blue={Title:BlueIsTheNewBlack，价格：500，说明：这种蓝色是最好的颜色} var Yellow={Title:yellowsthenewblack，价格：900，说明：这种黄色是最好的颜色} var Red={Title:redisennewblack，Price:100，Description:This Red是最好的颜色} 函数函数{ document.getElementById'id01'。style.display='block'； //显示来自对象的一些数据： document.getElementByIDTitleModel.innerHTML=Red.Title； document.getElementByIdPriceModal.innerHTML=Red.Price； document.getElementByIDDescriptionModel.innerHTML=Red.Description； } 功能黄色{ document.getElementById'id01'。style.display='block'； //显示来自对象的一些数据： document.getElementByIDTitleModel.innerHTML=Yellow.Title； document.getElementByIdPriceModal.innerHTML=Yellow.Price； document.getElementByIDDescriptionModel.innerHTML=Yellow.Description； } 功能蓝色{ document.getElementById'id01'。style.display='block'； //显示来自对象的一些数据： document.getElementByIDTitleModel.innerHTML=Blue.Title； document.getElementByIdPriceModal.innerHTML=Blue.Price； document.getElementByIDDescriptionModel.innerHTML=Blue.Description； } &时代； 一些文本。一些文本。一些文本。 一些文本。一些文本。一些文本。

一些文本。一些文本。一些文本。

---

这就是你所期望的吗

常数平方色 =document.getElementById'ColorsChoices' ，SquareMessage ={onRed:{Title:'redisennewblack'，Price:'100'，Description:'这个红色是最好的颜色'} ，onBlue:{标题：'BlueIsTheNewBlack'，价格：'500'，说明：'这种蓝色是最好的颜色'} ，onYellow:{标题：'yellowsthenewblack'，价格：'900'，说明：'这种黄色是最好的颜色'} } ，Modal_info =document.getElementById'idModal' ; Modal\u info.show=\u=>Modal\u info.classList.删除'noDisplay' Modal\u info.hide=\u=>Modal\u info.classList.add'noDisplay' idModal.onclick=e=> { 如果！e.target.matches'close-button，idModal'返回 e、 防止违约 模态信息隐藏 } const TitleModal=document.getElementById'TitleModal' ，PriceModal=document.getElementById'PriceModal' ，descriptionModel=document.getElementById'descriptionModel' ; squareColor.onclick=e=> { 如果！e.target.matches'.colorButton'返回 让inColor=e.target.id titleModel.textContent=SquareMessage[inColor].Title PriceModal.textContent=SquareMessage[inColor]。价格 DescriptionModal.textContent=SquareMessage[inColor]。说明 莫代尔信息秀 } 海军学校部{ 宽度：50px； 高度：50px； 浮动：左； } onRed{背景色：红色} onBlue{背景色：蓝色} onYellow{背景色：黄色} .noDisplay{显示：无} idModal{ z指数：3； 位置：固定； 左：0； 排名：0； 宽度：100%； 身高：100%； 溢出：隐藏； 背景色：rgba0,0,0,0.4； } idModal>div{ 位置：相对位置； 显示：块； 宽度：30em； 保证金：5em自动； 背景色：fff； 填充：1em； } 关闭按钮{ 位置：绝对位置； 排名：0； 右：.3em； 光标：指针； 字号：2em； 字体大小：粗体； } 关闭按钮：悬停{颜色：深红色；} &时代； 一些文本。 一些文本。

一些文本。

---

到底是什么问题？在你的代码中，什么东西没有按预期工作？为什么不为所有图像指定一个特定的类，使用querySelectorAll来获取这些元素，并附加一个onclicklistener来实现你想要的？解释你想要得到的东西会比解释如何获取它更容易；因为你选择了一个完全扭曲的方法