Javascript 单击下一个元素时重置颜色

我想从eventListener中重置颜色，因此当单击下一个元素时，颜色将从上一个元素重置

import“bootstrap/dist/css/bootstrap.css”；
const root=document.getElementById（“根”）；
var tbody=document.getElementById（“tbody”）；
var svg=document.getElementById（“svg”）；
const country=”https://restcountries.eu/rest/v1/alpha?codes=";
颜色；
addEventListener（“加载”，函数（）{
var svgDoc=svg.contentDocument；
[…svgDoc.querySelectorAll（“路径”）].forEach（路径=>{
addEventListener（“单击”，e=>{
getCountryNew（path.id）；
path.style.fill=“#ff9900”；
});
});
});
功能getCountryNew（土地代码）{
获取（国家/地区+土地代码）
.then（res=>res.json（））
.然后（国家=>{
var c=国家/地区。地图（国家=>{
返回(
"" +
"" +
country.name+
"" +
"" +
国家首都+
"" +
"" +
国家拼法+
"" +
"" +
国家/地区+
"" +
"" +
国家人口+
"" +
"" +
国家语言+
""
);
});
tbody.innerHTML=c；
});
}

您可以使用CSS对内联svg进行着色，因此，为了更改/重置颜色，需要在元素中添加/删除类

使用

：last child

为最后一个svg图标着色的小示例

const svg=`；
const$root=document.getElementById（'root'）；
函数addIcon（）{
$root.innerHTML+=svg；
}

svg{
宽度：50px；
}
#根svg：最后一个子路径{
填充物：红色；
}

+