Javascript 动态插入按钮中的值

我正在创建一个订单。如果有两组颜色和大小按钮，如何将所选按钮的值插入另一个元素

例如，您应该能够以任何顺序选择颜色和大小，并将其附加到产品名称中，因此在摘要中，它将显示

Product Name, [Size] , [Color]

---

这是我的名片。现在我有它，你可以选择每一个大小或颜色只有一个和活动类被添加到该选择。当我试图将其添加到摘要中时，遇到的问题是，它正在重复，我不确定如何验证它以使其不会重复。

试试这个。我已经更新了您的代码，使颜色和大小在单个跨距中，您只更新这些跨距，而不是整个文本。

for（变量i=0；i

订单摘要

20美元

船运

免费的

总数

20美元

送货地址
莎拉·史密斯

南大学大道23412号

佛罗里达州温特公园32792

下单

我选择了另一种解决方案，添加了一个存储值的数组和一个可以调用以更新摘要的函数

        let values = [item[0].innerHTML,'',''];

function updateSummary(){
    item[1].innerHTML = values.join(' ');
}

希望这有帮助：）

var size=document.getElementById（'size'）；
var sizeBtns=size.getElementsByClassName（'size-button'）；
对于（变量i=0；i

正文{
保证金：0；
填充：0；
框大小：边框框；}
车身按钮{
游标：指针；}
div{
显示器：flex；
宽度：85%；}
#容器{
保证金：0自动；
高度：500px；
方框阴影：10px 10px 20px灰色；}
#价格{
文本对齐：右对齐；
右边距：5%；}
h1{
文本对齐：居中；}
氢{
宽度：适合的内容；
左边距：5px；
高度：适合内容；}
h3{
保证金：0；
左边距：5%；}
.订购表格{
显示器：flex；
弯曲方向：立柱；
背景：白烟；}
.订购表格：第n种类型（2）{
背景：白色；}
.订购表格：第n名子女（3）{
显示：block；}
.订购表格：第n名子女（3）p{
宽度：90%；
边距：0自动；}
#总结{
显示器：flex；
保证金：0自动；
边缘底部：20px；
柔性包装：包装；
宽度：90%；}
#摘要p{
保证金：0自动；
填充：3倍；
宽度：48%；}
#产品{
宽度：90%；
身高：50%；
边距：0自动；}
#产品img{
保证金：0自动；
宽度：100%；}
#大小{
宽度：90%；
保证金：0自动；
边缘底部：10px；
显示器：flex；
对齐内容：均匀间隔；}
#大小按钮{
宽度：75px；
高度：40px；
边界：无；
字体大小：1.2rem；}
#颜色{
宽度：90%；
保证金：0自动；
显示器：flex；
对齐内容：均匀间隔；}
#彩色按钮{
宽度：65px；
高度：30px；
颜色：白色；}
#颜色按钮：第n个子项（1）{
背景：红色；}
#颜色按钮：第n个子项（2）{
背景：蓝色；}
#颜色按钮：第n个子项（3）{
背景：绿色；}
#颜色按钮：第n个子项（4）{
背景：黑色；}
形式{
宽度：90%；
身高：100%；
保证金：0自动；
显示器：flex；
伸缩方向：列；}
表单输入，表单选择{
宽度：90%；
边距：5px；}
表单输入：第n个子项（10）{
宽度：50%；}
表格选择：第n个子项（12）{
宽度：50%；}
表单输入：第n个子项（14）{
宽度：50%；}
表格选择：第n个子项（16）{
宽度：50%；}
#完整订单{
背景：浅绿色；
宽度：90%；
高度：50px；
保证金：0自动；
利润上限：200px；
显示：block；}
.有效尺寸{
背景：黄金；}
.颜色激活{
边框：3件纯金；}
label.required:：before，p.required:：before{
内容：“*”；
保证金权利：4px；
颜色：红色；}
p、 必需的{
字体：斜体；
文本对齐：居中；}

订单
订单
$20.00
选择一个尺寸
s
M
L
选择一种颜色
红色
蓝色
绿色
黑色
装运详情
=必填字段
全名