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

【问题标题】：How to add numbers/value together to a value based on keywords using JavaScript?如何使用 JavaScript 将数字/值添加到基于关键字的值？
【发布时间】：2019-01-13 00:23:31
【问题描述】：

我正在尝试创建一个小项目，但我被困住了，甚至不知道从哪里开始 JS 代码。基本上，当您在文本框中输入订单时，在您输入或单击按钮时（它不必实时添加所有内容，尽管它会“更酷”），它会在价格基础上添加一个数字关于检测到什么单词，所以如果汤是 5 美元，饮料是 2 并且你写了两者，它会根据你的订单将这两个价格相加。我考虑过创建一个数组（我不太擅长这些），我可以用 => thingy 为它分配一个数字，但是我将如何将它应用到键上的 textarea 或按钮上加起来将数组中的哪个单词（及其编号）检测为输入，然后添加与非数字数组关联的数字？我考虑过为每个单词做一个函数，如果该单词在框中，它只是在其下方的价格标签上添加一个数字，即价格，但如果语句为 30，我不知道这是否有益因为我想学习一些我以前没有尝试过的新东西，还有一个 else if 语句，但是搞砸了，不添加某些单词，只添加 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

【问题讨论】：

请提供您已经尝试过的代码。
用户点击食物图片并选择数量怎么办？
你可以创建一个{ "soup": 5 }格式的对象数组，然后让用户输入小写，按空格分割，并根据价格数组映射。
@fico 你检查答案了吗？
是的，我做到了，这两个答案都有效，我不完全理解它们，但它对我有很大帮助。

标签： javascript html css

【解决方案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);
});

【讨论】：

【解决方案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>

【讨论】：