this might be a hard one or a really obvious one.
What I did until now.
I have built a form and inside that form, there are 21 checkboxes divided into 3 different popups. With 6 checkboxes on the first one, 9 on the second one, and 6 on the last one. On every popup, only one checkbox can be selected. So 3 checkboxes can be clicked. This leaves me with 324 different variations.
Now the following thing I didn't know how to code.
I want to create 8 different if statements that trigger if certain checkboxes are checked this 8 different if statements toggle a class name, and they toggle 8 different colors.
until now I figured I have to do something like this.
`
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
let allCheckboxes = {};
document.querySelectorAll('[type="checkbox"]').forEach(item => {
if (item.checked === true) {
allCheckboxes[item.value] = true;
}
})
console.log(Object.entries(allCheckboxes))
})
`
this code lets me console.log out the checked checkboxes and displays them (check image).
s4, h4, e4 means the 4. checkbox from the first popup, the 4. checkbox from the second popup and the 4. chekcbox from the third popup. (these are te ones I clicked to show an example)
I would like to access these values something like this:
`
const bluecolor = document.getElementsByClassName("main");
if ("s4" && "h4" && "e4" == true || etc. ) {
bluecolor.classList.toggle("blue")
}
`
I know how to toggle classLists etc that's not a problem the problem is I don't know how to access the values in the image and use them in a if statement as condition.
I tried to access them in multiple ways but with no success.
