I am working on creating a list of projects where the user can select one as the default project for future use in other processes.
The issue I am facing is that each project in the list has a unique id and by default, they all have the RegularIcon class attached to them. This is how it is structured:
<span :id="project.id" class="RegularIcon" @click="changeIcon(project.id, projectKey)"></span>
In this code snippet, projectKey represents the index of the current project in the list.
Here is the function I have implemented:
changeIcon: function(projectId, projectIndex) {
let ClassName = document.getElementById(projectId).className;
if (ClassName == 'RegularIcon') {
var x = document.getElementsByClassName("SolidIcon");
var i;
if (x.length != 0) {
for (i=0; i < this.ProjectsList.length; i++) {
if (i != projectIndex) {
x[i].className = 'RegularIcon';
} else {
x[i].className = 'SolidIcon';
}
}
} else {
document.getElementById(projectId).className = 'SolidIcon';
}
} else {
document.getElementById(projectId).className = 'RegularIcon';
}
},
My intention was for the user to be able to click on an icon to toggle between filled and unfilled states, with the selected project becoming solid and filled while others return to their regular state.
However, upon testing the functionality, I encountered an error message :
Uncaught TypeError: Cannot set property 'classList' of undefined