用javascript计算产品、尺寸和数量的总价

我是javascript新手。我正在为一家肥皂公司建立一个网站。我需要javascript来计算价格后，客户选择的产品，大小和数量。 以下是链接：

我在这个网站上尝试了一些javascript：但是我的javascript没有出现

建立你的身体护理
产品：
香皂（5美元）
剃须皂（6美元）
香波皂（6美元）
香皂（7美元）
喷雾（8美元）
唇膏（8美元）
沐浴用品（10美元）

数量：
尺寸：
常规尺寸（3盎司）
4盎司（额外2美元）
5盎司（额外3美元）
（尺寸仅适用于肥皂。）

价格：

基数：
干性皮肤
自然皮肤
油性皮肤
没有一个
（基础仅适用于条形肥皂和面部肥皂。）

气味：
杉木
香茅
丁香
桉树
冷杉针
天竺葵
拉瓦丁
薰衣草
柠檬草
石灰
广藿香
薄荷
迷迭香
留兰香
八角茴香
茶树
最多4种成分：
乳木果油
无味芒果黄油
可可脂
茴香
玉米粉
叙利亚芸香籽
燕麦卷
胶状燕麦
活性炭
膨润土
螺旋藻
椰子奶粉
浮石
小荳蔻粉
没有一个
最多3个

（成分仅适用于酒吧香皂、洗发水香皂和面部香皂。）


包装：
联合品牌标签
你的品牌标签
你的品牌盒
 请将您的作品电邮至info@soapysoapcompany.com.
如果您需要艺术品方面的帮助，请联系我们：8122698812
姓名：电子邮件：电话：
信息：
（如有其他要求，请给我们留言）


var产品价格=[]；
产品价格[条形肥皂]=5；
产品价格[“剃须皂”]=6；
产品价格[‘香波皂’]=6；
产品价格['Face Soap']=7；
产品价格['Spray']=8；
产品价格['Balm']=8；
产品价格[‘沐浴液’]=10；
var大小_价格=[]；
尺码价格['常规尺码（3盎司）]=0；
尺码/价格['4oz']=2；
尺码价格['5oz']=3；
函数getProductPrice（）{
var soapProductPrice=0；
var theForm=document.forms[“privatebel”]；
var selectedProduct=form.elements[“product”]；
soapProductPrice=产品价格[selectedProduct.value]；
退货价格；
}
函数getSizePrice（）{
var soapSizePrice=0；
var theForm=document.forms[“privatebel”]；
var selectedSize=form.elements[“size”]；
soapSizePrice=size\u price[selectedSize.value]；
}
函数getQuantity（）{
var theForm=document.forms[“privatebel”]；
变量数量=形式元素[“数量”]；
var howmany=0；
如果（quantity.value！==“”）{
howmount=parseInt（数量.值）；
}
返回多少；
}
函数getTotal（）{
var soapPrice=（getProductPrice（）+getSizePrice（））*getQuantity（）；
var total=document.getElementById（'totalPrice'）；
document.getElementById（'totalPrice'）.innerHTML=“Soap$”的总价+soapPrice；
total.style.display='block'；
}

我稍微精简了你的代码，但我认为这应该足以让你上路。您可以查看代码注释以了解更多详细信息（或者留下注释，如果有什么不合理的地方，我会回复）：

//存储对DOM元素的一些引用
var productEl=document.querySelector（“#product”）；
var quantityEl=document.querySelector（“#quantity”）；
var sizeEl=document.querySelector（'#size'）；
var totalCostEl=document.querySelector（“#totalCost”）；
//在适用的元素上添加更改事件处理程序
productEl.addEventListener（“变更”，计算总数）；
quantityEl.addEventListener（“变更”，计算总数）；
sizeEl.addEventListener（'change'，calculateTotal）；
//将数据存储在对象文字中（本质上是创建映射）
var产品价格={}//注意到我将[]替换为{}
产品价格[条形肥皂]=5；
产品价格[“剃须皂”]=6；
产品价格[‘香波皂’]=6；
产品价格['Face Soap']=7；
产品价格['Spray']=8；
产品价格['Balm']=8；
产品价格[‘沐浴液’]=10；
var size_price={}//注意到我将[]替换为{}
尺码价格['常规尺码（3盎司）]=0；
尺码/价格['4oz']=2；
尺码价格['5oz']=3；
//这是我们的单个事件处理程序——当3个元素中的任何一个触发“更改”事件时调用
函数计算器总计（）{
//console.log（）
var单位成本=产品价格[产品价值]；
var额外成本=大小价格[sizeEl.value]| | 0；
变量数量=数量值| | 0；
totalCostEl.textContent=`总成本：$${（单位成本*数量）+额外成本}`；
}

建立你的身体护理
产品：
香皂（5美元）
剃须皂（6美元）
香波皂（6美元）
香皂（7美元）
喷雾（8美元）
唇膏（8美元）
沐浴用品（10美元）

数量：
尺寸：
常规尺寸（3盎司）
4盎司（额外2美元）
5盎司（额外3美元）
（尺寸仅适用于肥皂。）

价格：

你好，莱斯利。您能否在示例中明确说明哪些内容“不起作用”或哪些内容有问题，并可能对某些内容进行删减？例如，您的PHP看起来就像是在将数据插入数据库-我看不出这与当前的问题相关/必要。我注意到的第一件事是您正在调用

calculateTotal（）

，但尚未在javascript中定义这一点。嘿，泰勒，我的javascript不起作用，我需要的网站显示价格后，选择项目，大小和数量我明白，我们想帮助，但你的问题是有点太广泛的时刻。JavaScript的哪一部分不工作？你做了哪些研究或尝试来解决这个问题？您似乎遇到问题的函数不存在于您的代码中，因此我们目前无法真正帮助您。正如我所提到的，您有