Javascript 交换要选择的按钮

我有类似的东西

document.getElementsByClassName（“选项”）[0]
.addEventListener（“单击”，函数（e）{
if（例如target.classList.contains（“线型”））{
//从上一个元素中删除活动类
文件
.querySelector（“.line type.处于活动状态”）
.classList.remove（“处于活动状态”）；
e、 target.classList.add（“处于活动状态”）；
currentLine=e.target.dataset.lineType；
console.log（“当前行：+currentLine”）；
}
});
.line type{font-weight:bold}
.处于活动状态{color:red}

水管
电线
互联网线路
杜良寿
清除活动线路
这是一个开始


常量行数据={
水：{
线条点：[]，
线条：[]，
颜色：“蓝色”
},
电力：{
线条点：[]，
线条：[]，
颜色：“黄色”
},
互联网：{
线条点：[]，
线条：[]，
颜色：“灰色”
}
};
让电流型；
让sel=document.createElement（“选择”）；
sel.id=“线型”
sel.appendChild（新选项（“请选择“，”）；
sel.addEventListener（“更改”，函数（）{
currentType=this.value？linesData[this.value]：{}
console.log（this.value，currentType）
})
Object.keys（linesData）.forEach（key=>{
const title=key[0].toUpperCase（）+key.slice（1）+“line”；
选择追加子项（新选项（标题、键））；
});
document.getElementById（“app”）.appendChild（sel）

请更新我制作的CSS。它没有显示问题。您所说的交换选择是什么意思？按钮还是列表？我现在把它作为一个按钮，但是需要让它作为一个元素使用J选项，比如水管、电线、网线，然后获取它的数据属性，但是当我尝试使用addEventListener（更改）时它不起作用，所以我需要一些帮助。你能发布你的选择/更改版本而不是按钮版本吗？我们有一些想法吗？我还没有选择版本，因为它不起作用，我真的不知道如何更改。-这里是按钮，需要将其更改为，以便发布您所拥有的。因为现在我们有了一些模糊的描述，比如
，我们需要让它作为一个元素，使用诸如水管、电线、网线等选项，然后获得它的数据属性
@KacperSitarz Great。请回答