如何使用JavaScript将数字/值添加到基于关键字的值中？

我试图创建一个小项目，但我被卡住了，甚至不知道从哪里开始使用JS代码。基本上，当您在文本框中键入订单时，当您键入订单时，或者当您单击按钮时，它不必实时添加所有内容，尽管这样会更酷，但它会根据检测到的单词向价格中添加一个数字，因此，如果汤是5美元，饮料是2美元，并且您将两者都写入，它会根据你的订单把这两个价格加起来。我想创建一个数组，我不太擅长这些，我可以用=>thingy为它分配一个数字，但我如何将它应用到键盘上的文本区域或按钮，根据数组中的哪个单词和它的“数字”被检测为输入，然后添加与非数字数组相关的数字？我想为每个单词做一个函数，如果这个单词在盒子里，它只会在下面的价格标签上加上一个数字，但那会是30个else if语句，我不知道这是否有益，因为我想学习一些我以前没有尝试过的新东西，以及一个else if语句，但会弄糟，不会添加某些单词并且只增加2个价格，而不是多少。也许是foreach函数

以下是HTML和CSS：

身体{ 背景：2B2B； 文本对齐：居中； } 梅努迪夫{ 背景：2B2B； 高度：1000px； 宽度：500px； 边框：4px白色虚线； } 梅努蒂特尔{ 颜色：白色； 背景：7b2302； 高度：200px； 宽度：200px； 边界半径：100px； 保证金：自动； 字号：21px； } 菜单文本{ 位置：相对位置； 底部：-55px； 字体家族：纸莎草； } .listitem{ 列表样式：无； 颜色：白色； 字体家族：纸莎草； 字体大小：20px； 浮动：左； 边缘底部：10px； } 医嘱{ 宽度：1000px； 高度：800px； 背景：2B2B； 位置：相对位置； 顶部：-1008px； 右图：-550px； 边框：4px白色虚线； } 订单标题IV{ 背景：7b2302； 颜色：白色； 宽度：450px； 高度：100px； } 订单文本{ 字体家族：纸莎草； 字体大小：40px； 位置：相对位置； 底部：-18px； } .listorderitem{ 显示：内联块； 位置：相对位置； } 第一项{ 位置：相对位置； 底部：-60px； } 订单列表{ 位置：相对位置； 右：220px； 顶部：-50px； } TXT区域{ 背景：2B2B； 颜色：白色； 边框：2倍纯白； 字体家族：纸莎草； 字体大小：30px； } .takelist{ 显示：内联块； 颜色：白色； 字体大小：60px； 利润率：60像素； 位置：相对位置； 顶部：-100px； 字体家族：纸莎草； } mybtn{ 宽度：100px； 高度：50px； 位置：相对位置； 顶部：-12px； 背景：无； 边框：2倍纯白； 颜色：白色； 字体家族：纸莎草； } 菲利普的面包房 汤：$5 面条：5美元 面包：2美元 茶：1.50美元 千层面：6美元 穆萨卡：%6 蛋糕：4美元 沙拉：4美元 水果沙拉：4美元 橙汁：2美元 苹果汁：2美元 蔓越莓汁：2美元 饼干：3美元 饼干：3美元 冰淇淋：3美元 筹码：1美元 墨西哥玉米卷：2美元 果冻：1美元 冰沙：1美元 煎饼：8美元 三明治：4美元 汉堡：5美元 薯条：7美元 坚果：3美元 大米：8美元 柴

DM您的订单

$

|

顺序

---

为了充分利用这一功能，您应该将订单项目按分开，并给出项目数量，即使您购买1。 试试一份千层面，两份蛋糕

让输入=document.querySelectortxtarea 让所选食物=[]； 让菜单=[ { 项目：汤， 价格:5元 }, { 项目:面条,， 价格:5元 }, { 项目：面包， 价格:2 }, { 项目:茶,， 价格：1.5 }, { 项目：千层面， 价格:6 }, { 项目：穆萨卡， 价格:6 }, { 项目:蛋糕,， 价格:4 }, { 项目：沙拉， 价格:4 }, { 项目：水果沙拉， 价格:4 }, { 项目：橙汁， 价格:2 }, { 商品：苹果汁， 价格:2 }, { 商品：蔓越莓汁， 价格:2 }, { 项目:曲奇饼,， 价格:3 }, { 项目:饼干,， 价格:3 }, { 项目：ice icream， 价格:3 }, { 项目:晶片,， 价格：1 }, { 项目：墨西哥玉米卷， 价格:2 }, { 项目：果冻， 价格：1 }, { 商品：冰沙， 价格：1 }, { 项目:煎饼,， 价格:8 }, { 项目:三明治,， 价格:4 }, { 项目：汉堡， 价格:5元 }, { 项目：薯条， 价格:7 }, { 项目：坚果， 价格:3 }, { 项目：大米， 价格:8 }, { 项目：柴， 价格:5元 } ]; input.onkeyup==>{ 让selection=input.value.replace//g、.split、， 设total=0； selection.maps=>{ 让成本=0； 让found=menu.filterm=>m.item==s.replace/\d+/g， iffind.length>0{ 成本=找到[0]。价格*parseInts 总+=成本； } } document.querySelectorprice.innerText=总计； } 身体{ 背景：2B2B； 文本对齐：居中； } 梅努迪夫{ 背景：2B2B； 高度：1000px； 宽度：500px； 边框：4px白色虚线； } 梅努蒂特尔{ 颜色：白色 ; 背景：7b2302； 高度：200px； 宽度：200px； 边界半径：100px； 保证金：自动； 字号：21px； } 菜单文本{ 位置：相对位置； 底部：-55px； 字体家族：纸莎草； } .listitem{ 列表样式：无； 颜色：白色； 字体家族：纸莎草； 字体大小：20px； 浮动：左； 边缘底部：10px； } 医嘱{ 宽度：1000px； 高度：800px； 背景：2B2B； 位置：相对位置； 顶部：-1008px； 右图：-550px； 边框：4px白色虚线； } 订单标题IV{ 背景：7b2302； 颜色：白色； 宽度：450px； 高度：100px； } 订单文本{ 字体家族：纸莎草； 字体大小：40px； 位置：相对位置； 底部：-18px； } .listorderitem{ 显示：内联块； 位置：相对位置； } 第一项{ 位置：相对位置； 底部：-60px； } 订单列表{ 位置：相对位置； 右：220px； 顶部：-50px； } TXT区域{ 背景：2B2B； 颜色：白色； 边框：2倍纯白； 字体家族：纸莎草； 字体大小：30px； } .takelist{ 显示：内联块； 颜色：白色； 字体大小：60px； 利润率：60像素； 位置：相对位置； 顶部：-100px； 字体家族：纸莎草； } mybtn{ 宽度：100px； 高度：50px； 位置：相对位置； 顶部：-12px； 背景：无； 边框：2倍纯白； 颜色：白色； 字体家族：纸莎草； } 菲利普的面包房 汤：$5 面条：5美元 面包：2美元 茶：1.50美元 千层面：6美元 穆萨卡：%6 蛋糕：4美元 沙拉：4美元 水果沙拉：4美元 橙汁：2美元 苹果汁：2美元 蔓越莓汁：2美元 饼干：3美元 饼干：3美元 冰淇淋：3美元 筹码：1美元 墨西哥玉米卷：2美元 果冻：1美元 冰沙：1美元 煎饼：8美元 三明治：4美元 汉堡：5美元 薯条：7美元 坚果：3美元 大米：8美元 柴

DM您的订单

$

|

顺序

---

您可能正在寻找以下内容。 注意：下面的代码只包括汤、面条和面包的映射，但您可以轻松地将其余项目添加到价格映射中。 此外，还假定空格是用户在textarea中使用的分隔符。您可以通过将不同的字符传递到split来更改它

---

请提供您已经尝试过的代码。用户单击食物图像并选择数量如何？您可以制作一个{soup:5}格式的对象数组，然后让用户输入小写，按空格拆分，并根据价格数组进行映射。@fico您检查了答案吗？是的，我检查了，两个答案都有效，我不完全理解他们，但这对我帮助很大。

const text = document.getElementById('txtarea');
const totalPrice = document.getElementById('price');
const priceMap = {
  soup: 5,
  noodles: 5,
  bread: 2
};
text.addEventListener('keyup', (e) => {
  totalPrice.textContent = text.value.split(' ')
    .filter(Boolean)
    .map(v => v.toLowerCase())
    .map(v => priceMap[v])
    .filter(Boolean)
    .reduce((sum, price) => sum + price, 0);
});