Как добавить числа / значение вместе к значению на основе ключевых слов, используя JavaScript?

Question

Я пытаюсь создать небольшой проект, но я застрял и даже не знаю, с чего начать с кода JS. По сути, когда вы вводите свой заказ в текстовом поле, когда вы его набираете или когда нажимаете кнопку (не нужно все складывать в реальном времени, хотя это будет «круче»), это добавляет число к цене о том, какое слово обнаружено, поэтому, если суп стоит, например, 5 долларов, а напиток 2, и вы пишете оба, это прибавит две цены в зависимости от вашего заказа. Я думал о создании массива (я не слишком хорош с ними), и я мог бы просто присвоить ему номер с помощью => штуки, но как мне применить его к текстовой области при нажатии клавиши вверх или кнопке для добавления на основе на каком слове из массива (и его 'номер) обнаруживается в качестве ввода, а затем добавить числа, связанные с не числовым массивом? Я думал о создании функции для каждого слова, и если это слово находится в поле, оно просто добавляет число, которое является ценой к ценнику ниже него, но это будет еще 30, если утверждения, и я не знаю, будет ли это полезно так как я хочу узнать что-то новое, чего я раньше не пробовал, и заявление if else, но все испортилось и не добавляло определенные слова и добавляло только 2 цены вместо скольких. Может быть, функция foreach?

Вот HTML & CSS: https://codepen.io/Filizof/pen/zyRvOG?editors=1010

body {
  background: #2b2b2b;
  text-align: center;
}
#menudiv {
  background: #2b2b2b;
  height: 1000px;
  width: 500px;
  border: 4px dashed white;
}
#menutitle {
  color: white;
  background: #7b2302;
  height: 200px;
  width: 200px;
  border-radius: 100px;
  margin: auto;
  font-size: 21px;
}
#menutext {
  position: relative;
  bottom: -55px;
  font-family: papyrus;
}
.listitem {
  list-style: none;
  color: white;
  font-family: papyrus;
  font-size: 20px;
  float: left;
  margin-bottom: 10px;
}
#orderdiv {
  width: 1000px;
  height: 800px;
  background: #2b2b2b;
  position: relative;
  top: -1008px;
  right: -550px;
  border: 4px dashed white;
}
#ordertitlediv {
  background: #7b2302;
  color: white;
  width: 450px;
  height: 100px;
}
#ordertext {
  font-family: papyrus;
  font-size: 40px;
  position: relative;
  bottom: -18px;
}
.listorderitem {
  display: inline-block;
  position: relative;
}
#firstitem {
  position: relative;
  bottom: -60px;
}
#orderlist {
  position: relative;
  right: 220px;
  top: -50px;
}
#txtarea {
  background: #2b2b2b;
  color: white;
  border: 2px solid white;
  font-family: papyrus;
  font-size: 30px;
}
.takelist {
  display: inline-block;
  color: white;
  font-size: 60px;
  margin: 60px;
  position: relative;
  top: -100px;
  font-family: papyrus;
}
#mybtn {
  width: 100px;
  height: 50px;
  position: relative;
  top: -12px;
  background: none;
  border: 2px solid white;
  color: white;
  font-family: papyrus;
}

<div id="menudiv">
  <div id="menutitle"><p id="menutext">FILIP'S BAKEHOUSE<p/></div>
  <ul id="foodlist">
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glamour.com%2Fphotos%2F57597064f4c7c09c2559f60e%2Fmaster%2Fw_1024%2Cc_limit%2Fcarrot-soup.png&f=1">Soup: $5</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fcentra.ie%2Fimage%2Fvar%2Ffiles%2FADF%2FLoveDinner%2FCentra_honey_sauce_noodles.png&f=1">Noodles: $5</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F08%2FPNGPIX-COM-Bread-PNG-Transparent-Image.png&f=1">Bread: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Ftea%2Ftea_PNG16896.png&f=1">Tea: $1.50</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pizzainn-me.com%2Fcontent%2Fthemes%2Fbernelli%2Fimg%2Fappetizers%2Flasagna.png&f=1">Lasagna: $6</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2F78.media.tumblr.com%2F32f23f3391e3b515d6b430b895458f9c%2Ftumblr_ns6b039Uzg1uyxczto1_500.png&f=1">Mousaka: %6</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Fcake%2Fcake_PNG13111.png&f=1">Cake: $4</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngall.com%2Fwp-content%2Fuploads%2F2016%2F05%2FSalad-PNG-Image.png&f=1">Salad: $4</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.govegan.org.uk%2Fwp-content%2Fuploads%2F2015%2F11%2Ffruitsalad300x3007.png&f=1">Fruit Salad: $4</li>
    <li class="listitem"><img height="50" width="50" src="http://miam-images.m.i.pic.centerblog.net/0837921e.png">Orange Juice: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngonly.com%2Fwp-content%2Fuploads%2F2017%2F05%2FApple-Juice-PNG-Picture.png&f=1">Apple Juice: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pkdrecipes.com%2Fwp-content%2Fuploads%2F2010%2F09%2F032411-Cranberry-Juice-400.png&f=1">Cranberry Juice: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fimg15.deviantart.net%2Fddeb%2Fi%2F2013%2F329%2F3%2Fe%2Fcookie__png_by_darksideofgraphic-d6vlc5l.png&f=1">Cookies: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Fbiscuit%2Fbiscuit_PNG88.png&f=1">Biscuits: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F07%2FPNGPIX-COM-Ice-Cream-PNG-Transparent-Image.png&f=1">Ice Cream: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F11%2FPNGPIX-COM-Potato-Chips-PNG-Transparent-Image.png&f=1">Chips: $1</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fselflender.s3.amazonaws.com%2Fblog%2Ftacos_1.png&f=1">Tacos: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpluspng.com%2Fimg-png%2Ffree-png-jelly-free-range-snack-co-452.png&f=1">Jelly: $1</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fbodyfuelcafe.co.uk%2Fwp-content%2Fuploads%2F2014%2F07%2FTHMB-Mango-Smoothie.png&f=1">Smoothie: $1</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F37.media.tumblr.com%2F605762b2e80fbdda35364d5b0db4a540%2Ftumblr_n5bxf2lI5k1rx3d1wo1_r2_500.png&f=1">Pancakes: $8</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F10%2FPNGPIX-COM-Sandwich-PNG-Transparent-Image-500x282.png&f=1">Sandwich: $4</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Fburger_sandwich%2Fburger_sandwich_PNG4114.png&f=1">Burger: $5</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Ffries%2Ffries_PNG77.png&f=1">Fries: $7</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F10%2FPNGPIX-COM-Almond-Nut-PNG-Image-500x404.png&f=1">Nuts: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpluspng.com%2Fimg-png%2Frice-png-rice-png-601.png&f=1">Rice: $8</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fpruebeydisfrute.files.wordpress.com%2F2015%2F09%2Fchai-latte.png&f=1">Chai</li>
  </ul>
    </div>
</div>
<div id="orderdiv">
  <ul id="orderlist">
  <li id="firstitem" class="listorderitem"><img id="orderimg" height="100" width="100" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2016%2F09%2F13%2F18%2F38%2Fsilverware-1667988__340.png&f=1"></li>
    <li class="listorderitem"><div id="ordertitlediv"><p id="ordertext">DM YOUR ORDER</p></div></li>
  </ul>
  <textarea id="txtarea" rows="5" cols="50"></textarea>
  <ul id="takeorderlist">
    <li class="takelist">$<p id="price"></p></li>
    <li class="takelist"><p id="wall">|</p></li>
    <li class="takelist"><button id="mybtn">ORDER</button></li>
  </ul>
</div>

create array w/ foods and a numbered price
create variables for the txtarea in the html
create the function (maybe foreach) that adds the price of each word

Answer 1

Вы, вероятно, ищете что-то следующее. Обратите внимание, что приведенный ниже код включает только сопоставления для soup, noodles и bread, но вы можете легко добавить оставшиеся элементы в priceMap. Также пробел предполагается в качестве разделителя, используемого пользователем в textarea. Вы можете изменить его, передав другой символ в split.

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);
});

Answer 2

Чтобы использовать этот полнофункциональный функционал, вы должны разделить позиции заказа на , и указать количество товара, даже если вы покупаете 1. Попробуйте 1 lasagna, 2 cake

let input = document.querySelector("#txtarea")
let selectedFood = [];
let menu = [
	{
		item: "soup",
		price: 5
	},
	{
		item: "noodles",
		price: 5
	},
	{
		item: "bread",
		price: 2
	},
	{
		item: "tea",
		price: 1.5
	},
	{
		item: "lasagna",
		price: 6
	},
	{
		item: "mousaka",
		price: 6
	},
	{
		item: "cake",
		price: 4
	},
	{
		item: "salad",
		price: 4
	},
	{
		item: "fruit salad",
		price: 4
	},
	{
		item: "orange juice",
		price: 2
	},
	{
		item: "apple juice",
		price: 2
	},
	{
		item: "cranberry juice",
		price: 2
	},
	{
		item: "cookies",
		price: 3
	},
	{
		item: "biscuits",
		price: 3
	},
	{
		item: "ice icream",
		price: 3
	},
	{
		item: "chips",
		price: 1
	},
	{
		item: "tacos",
		price: 2
	},
	{
		item: "jelly",
		price: 1
	},
	{
		item: "smoothie",
		price: 1
	},
	{
		item: "pancakes",
		price: 8
	},
	{
		item: "sandwich",
		price: 4
	},
	{
		item: "burger",
		price: 5
	},
	{
		item: "fries",
		price: 7
	},
	{
		item: "nuts",
		price: 3
	},
	{
		item: "rice",
		price: 8
	},
	{
		item: "chai",
		price: 5
	}
];
input.onkeyup = () => {
	let selection = input.value.replace(/ /g, '').split(",")
	let total = 0;
	selection.map(s => {
	let cost = 0;
	let found = menu.filter(m => m.item == s.replace(/\d+/g, ''))
	if(found.length > 0) {
		cost = found[0].price * parseInt(s)
		total += cost;
	}
	})
	document.querySelector("#price").innerText = total;
}

body {
  background: #2b2b2b;
  text-align: center;
}
#menudiv {
  background: #2b2b2b;
  height: 1000px;
  width: 500px;
  border: 4px dashed white;
}
#menutitle {
  color: white;
  background: #7b2302;
  height: 200px;
  width: 200px;
  border-radius: 100px;
  margin: auto;
  font-size: 21px;
}
#menutext {
  position: relative;
  bottom: -55px;
  font-family: papyrus;
}
.listitem {
  list-style: none;
  color: white;
  font-family: papyrus;
  font-size: 20px;
  float: left;
  margin-bottom: 10px;
}
#orderdiv {
  width: 1000px;
  height: 800px;
  background: #2b2b2b;
  position: relative;
  top: -1008px;
  right: -550px;
  border: 4px dashed white;
}
#ordertitlediv {
  background: #7b2302;
  color: white;
  width: 450px;
  height: 100px;
}
#ordertext {
  font-family: papyrus;
  font-size: 40px;
  position: relative;
  bottom: -18px;
}
.listorderitem {
  display: inline-block;
  position: relative;
}
#firstitem {
  position: relative;
  bottom: -60px;
}
#orderlist {
  position: relative;
  right: 220px;
  top: -50px;
}
#txtarea {
  background: #2b2b2b;
  color: white;
  border: 2px solid white;
  font-family: papyrus;
  font-size: 30px;
}
.takelist {
  display: inline-block;
  color: white;
  font-size: 60px;
  margin: 60px;
  position: relative;
  top: -100px;
  font-family: papyrus;
}
#mybtn {
  width: 100px;
  height: 50px;
  position: relative;
  top: -12px;
  background: none;
  border: 2px solid white;
  color: white;
  font-family: papyrus;
}

<div id="menudiv">
  <div id="menutitle"><p id="menutext">FILIP'S BAKEHOUSE<p/></div>
  <ul id="foodlist">
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glamour.com%2Fphotos%2F57597064f4c7c09c2559f60e%2Fmaster%2Fw_1024%2Cc_limit%2Fcarrot-soup.png&f=1">Soup: $5</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fcentra.ie%2Fimage%2Fvar%2Ffiles%2FADF%2FLoveDinner%2FCentra_honey_sauce_noodles.png&f=1">Noodles: $5</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F08%2FPNGPIX-COM-Bread-PNG-Transparent-Image.png&f=1">Bread: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Ftea%2Ftea_PNG16896.png&f=1">Tea: $1.50</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pizzainn-me.com%2Fcontent%2Fthemes%2Fbernelli%2Fimg%2Fappetizers%2Flasagna.png&f=1">Lasagna: $6</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2F78.media.tumblr.com%2F32f23f3391e3b515d6b430b895458f9c%2Ftumblr_ns6b039Uzg1uyxczto1_500.png&f=1">Mousaka: %6</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Fcake%2Fcake_PNG13111.png&f=1">Cake: $4</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngall.com%2Fwp-content%2Fuploads%2F2016%2F05%2FSalad-PNG-Image.png&f=1">Salad: $4</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.govegan.org.uk%2Fwp-content%2Fuploads%2F2015%2F11%2Ffruitsalad300x3007.png&f=1">Fruit Salad: $4</li>
    <li class="listitem"><img height="50" width="50" src="http://miam-images.m.i.pic.centerblog.net/0837921e.png">Orange Juice: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngonly.com%2Fwp-content%2Fuploads%2F2017%2F05%2FApple-Juice-PNG-Picture.png&f=1">Apple Juice: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pkdrecipes.com%2Fwp-content%2Fuploads%2F2010%2F09%2F032411-Cranberry-Juice-400.png&f=1">Cranberry Juice: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fimg15.deviantart.net%2Fddeb%2Fi%2F2013%2F329%2F3%2Fe%2Fcookie__png_by_darksideofgraphic-d6vlc5l.png&f=1">Cookies: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Fbiscuit%2Fbiscuit_PNG88.png&f=1">Biscuits: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F07%2FPNGPIX-COM-Ice-Cream-PNG-Transparent-Image.png&f=1">Ice Cream: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F11%2FPNGPIX-COM-Potato-Chips-PNG-Transparent-Image.png&f=1">Chips: $1</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fselflender.s3.amazonaws.com%2Fblog%2Ftacos_1.png&f=1">Tacos: $2</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpluspng.com%2Fimg-png%2Ffree-png-jelly-free-range-snack-co-452.png&f=1">Jelly: $1</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fbodyfuelcafe.co.uk%2Fwp-content%2Fuploads%2F2014%2F07%2FTHMB-Mango-Smoothie.png&f=1">Smoothie: $1</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F37.media.tumblr.com%2F605762b2e80fbdda35364d5b0db4a540%2Ftumblr_n5bxf2lI5k1rx3d1wo1_r2_500.png&f=1">Pancakes: $8</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F10%2FPNGPIX-COM-Sandwich-PNG-Transparent-Image-500x282.png&f=1">Sandwich: $4</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Fburger_sandwich%2Fburger_sandwich_PNG4114.png&f=1">Burger: $5</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpngimg.com%2Fuploads%2Ffries%2Ffries_PNG77.png&f=1">Fries: $7</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngpix.com%2Fwp-content%2Fuploads%2F2016%2F10%2FPNGPIX-COM-Almond-Nut-PNG-Image-500x404.png&f=1">Nuts: $3</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fpluspng.com%2Fimg-png%2Frice-png-rice-png-601.png&f=1">Rice: $8</li>
    <li class="listitem"><img height="50" width="50" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fpruebeydisfrute.files.wordpress.com%2F2015%2F09%2Fchai-latte.png&f=1">Chai</li>
  </ul>
</div>
<div id="orderdiv">
  <ul id="orderlist">
  <li id="firstitem" class="listorderitem"><img id="orderimg" height="100" width="100" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2016%2F09%2F13%2F18%2F38%2Fsilverware-1667988__340.png&f=1"></li>
    <li class="listorderitem"><div id="ordertitlediv"><p id="ordertext">DM YOUR ORDER</p></div></li>
  </ul>
  <textarea id="txtarea" rows="5" cols="50"></textarea>
  <ul id="takeorderlist">
    <li class="takelist">$<p id="price"></p></li>
    <li class="takelist"><p id="wall">|</p></li>
    <li class="takelist"><button id="mybtn">ORDER</button></li>
  </ul>
</div>