需要使用Javascript添加到我的购物清单中

我一直在研究一个列表，它使用一个对象在我的Javascript文件中创建一个杂货店列表来传播浏览器，并计算列表和价格的总和。我遇到的问题是，我想添加一个附加函数，在该函数中输入杂货项目及其价格。添加完这两个后，按表单中的submit按钮，它将自己添加到杂货店列表中。My addList（）函数工作不正常

//第二次提交
//创建了获取多个ID以放置列表对象数组的变量
var Cart=document.getElementById（“basketItems”）；
//创建了两个变量来获取输入标签中的id，以获取输入的新项目和价格，并将其添加到things数组中
//创建了一个groceries对象，其中包含things数组和用于计算总价格的对象函数
食品杂货={
事情：[
{项目：“鸡肉”，价格：4.65}，
{项目：“西红柿”，价格：.68}，
{项目：“意大利面”，价格：3.68}，
{项目：“奶酪”，价格：2.99}，
],
总计：函数（）{
var总和=0；
对于（var i=0；i您忘记了在删除项目后将其重新添加到DOM中。在本例中，我将负责该项目的逻辑包装到一个名为
foo（）
的函数中，并在
addList（）
函数的末尾调用它，在加载页面时调用一次

此外，正如@Lelio Faieta指出的，表单正在尝试提交更改，这将导致页面重新加载。可以使用
e.preventDefault（）
或将按钮类型设置为
type=“button”
来取消此操作

示例如下：


//第二次提交
//创建了获取多个ID以放置列表对象数组的变量
var Cart=document.getElementById（“basketItems”）；
//创建了两个变量来获取输入标签中的id，以获取输入的新项目和价格，并将其添加到things数组中
//创建了一个groceries对象，其中包含things数组和用于计算总价格的对象函数
食品风险={
事情：[{
物品：“鸡肉”，
价格:4.65
},
{
项目：“西红柿”，
价格：.68
},
{
项目：“意大利面”，
价格:3.68
},
{
项目：“奶酪”，
售价：2.99
},
],
总计：函数（）{
var总和=0；
对于（var i=0；i）您在第一次输入中有两次id属性无效，因此您的表单没有方法也没有操作。那么提交时它应该做什么？