如何用javascript制作购物车

我在为项目使用Javascript制作购物车时遇到问题。我制作了名为“添加到购物车”的按钮，并尝试了各种方法，以便在单击按钮时，将产品的名称和价格添加到购物车中。我试过按钮点击，但不起作用。我尝试了addEventListener，但由于某种原因，当我没有点击按钮时，它会显示产品信息。我如何使其在我单击按钮时显示购物车中的产品信息？另外，我需要如何创建元素div（我在下面注释掉的代码）

我也不知道如何在购物车上显示产品图像

var shoppingCart=[]；
功能addToCart（标题、价格）{
var乘积={}；
product.title=标题；
产品价格=价格；
购物车。推（产品）；
displayShoppingCart（）；
}
函数displayShoppingCart（）{
var totalPrice=0；
var displayTitle=document.getElementById（“displayTitle”）；
var displayPrice=document.getElementById（“displayPrice”；
用于（shoppingCart中的var产品）{
displayTitle.innerHTML=shoppingCart[product]。标题；
displayPrice.innerHTML=购物车[产品]。价格；
//title.createElement（“div”）；
//div.className=“itemTitle”；
//itemTitle=document.queryselectoral（“.itemTitle”）；
//itemTitle.innerHTML=shoppingCart[product].title；
} 
}
var book1=document.getElementById（“book1”）；
book1.addEventListener（“点击”，addToCart（“破解编码面试”，“29.99美元”）；

添加到购物车

这是基本购物车，您可以在文本框中键入标题和价格（仅限数字，不允许使用字符），然后单击按钮将商品添加到购物车中

var乘积=[]；
函数fun（）{
var x={}；
x、 price=document.getElementById（'price'）.value；
x、 title=document.getElementById（'title'）。值；
产品推送（x）；
var iDiv=document.createElement（'div'）；
iDiv.id=产品长度；
iDiv.className='block'；
document.getElementsByTagName（'body'）[0].appendChild（iDiv）；
var para=document.createElement（“span”）；
var node=document.createTextNode（'Title:'+x.Title+'|'）；
子节点（节点）段；
var元素=document.getElementById（product.length）；
要素.附件（第6段）；
para=document.createElement（“span”）；
节点=document.createTextNode（'Price:'+x.Price）；
子节点（节点）段；
要素.附件（第6段）；
}

标题：
价格：
添加到购物车
购物车信息

首先，您必须修复语法错误。什么语法错误？单击“运行代码片段”按钮或查看开发人员的控制台即可。我不确定您是否意识到使用了错误的引号：

onclick=“addToCart”（“破解代码采访”，“$29.99”）”>

；检查此项哦，我将双引号改为单引号，现在可以使用了！谢谢！看起来您甚至没有尝试修复OP的代码。相反，您只是发布了全新的代码，这只是OP可以在许多教程中找到的购物车的一个示例。