Javascript 对象将值排列到样式元素

我使用这段代码来获取复选框，并将其名称与对象数组匹配，以便能够检索一些值。样品小提琴

如何使用这些值创建跨度元素并根据选中的复选框更新颜色设置位置

var-inputElements=document.getElementsByName（“水果”）；
常量项={
“荔枝”：{价格：10，位置：80，colCode:'ff0000'}，
“橙色”：{price:12，pos:60，colCode:00ff00}，
“苹果”：{价格：8，位置：40，colCode:'ff6600'}，
“芒果”：{price:12，pos:60，colCode:00ff00}，
“香蕉”：{price:4，pos:80，colCode:'ff0000'}
};
让结果=[…document.queryselectoral（“[name=fruits]：选中”）]
.map（chk=>(
var marker=document.createElement（'span'）；
marker.style.color=colCode:${item[chk.value].colCode}，//不起作用
marker.style.marginLeft=pos:${item[chk.value].pos}px）//不起作用
);
荔枝

橙色

苹果

芒果

香蕉
由于您没有提供所需的结果，您的问题对于代码的目标是什么非常不清楚，但我可以帮助您消除语法错误

您的代码存在以下问题：


您没有正确使用箭头功能。如果计划在其中使用多个语句，或定义变量，则应使用大括号，然后返回所需的结果

您没有正确使用模板文本。为了让它们工作，它们必须被封在背面



var-inputElements=document.getElementsByName（“水果”）；
常量项={
“荔枝”：{价格：10，位置：80，colCode:“ff0000”}，
“橙色”：{price:12，pos:60，colCode:“00ff00”}，
“苹果”：{price:8，pos:40，colCode:“ff6600”}，
“芒果”：{price:12，pos:60，colCode:“00ff00”}，
“香蕉”：{price:4，pos:80，colCode:“ff0000”}
};
let result=[…document.queryselectoral（“[name=fruits]：checked”）].map（chk=>{
/*创建一个元素*/
var marker=document.createElement（“span”）；
/*使用模板文本设置属性*/
marker.style.color=`${item[chk.value].colCode}`；
marker.style.marginLeft=`${item[chk.value].pos}px`；
/*把一些内容放进电脑里*/
marker.textContent=“Content”；
/*将文件附加到包装器中*/
appendChild（marker）；
/*返回，以便缓存在结果数组中*/
返回标记；
});
荔枝

橙色

苹果

芒果

香蕉
您想对span做什么？很不清楚。您不需要附加它或任何东西。@aviya.developer感谢您的回复。我想把它附加到
document.getElementById（'wrapper'）
中，然后给它上色并设置左边距。但是span中必须有一些文本。你能描述一下你希望达到的最终结果吗？此外，您的html中没有id为“wrapper”的元素。@aviya.developer谢谢。跨度可以设置样式，因此不需要文本<代码>span{宽度：20px；高度：20px；边框：1px实心#ccc；显示：block；}
。
#wrapper
仅用于说明目的。我的要求是能够知道如何使用对象数组中的值。如果要使其成为
块，则无需使用
span
。只需使用
div
+10谢谢。对不起，问题不清楚。我想在
document.getElementById（'wrapper'）
中添加一个新的span，然后给它上色并设置左边距。因此，如果选中3个复选框，则根据对象数组值，应该有3个具有相关颜色的跨距。请参阅我的代码段。它能达到你想要的效果吗？太好了。。。你肯定回答了我的问题。谢谢很乐意帮忙，@jules2x