I need to style specific elements by id using given object.
const projectSkillsMap = {
'project1': ['skill_2', 'skill4', 'skill5'],
'project2': ['skill1', 'skill_2', 'skill4', 'skill5', 'skill6'],
'project3': ['skill1', 'skill_2', 'skill3', 'skill4', 'skill5', 'skill6']
}
function chooseProject(key) {
// adding accet to chosen group
Object.keys(projectSkillsMap).map((i) => {
if (i == key) {
Object.entries(projectSkillsMap).map((il, value) => {
if (il == i) {
document.getElementById(value).classList.toggle('button_click')
}
})
}
})
// removing accents from other groups
Object.keys(projectSkillsMap).map((i) => {
if (i !== key) {
projectSkillsMap[`${i}`].map((el) => document.getElementById(`${el}`).classList.remove('button_click'))
}
})
Object.values(projectSkillsMap).map((el) => {
if (el !== key) {
document.getElementById(el).classList.remove('button_click')
}
})
}
When user clicks on a button the chooseProject()
function is triggered with one of the object keys. The problem is that document.getElementById(value).classList.toggle('button_click')
does not work because of duplicate values in my object.
I realized that when I changed my object and left only unique values for each key then the code work as expected.
Is there any way I can make it work with duplicate values?