I have 11 buttons with their own class, as well as all 11 share the class .theme-color. I am trying to have it change to the background color on the button class. My idea was to get the class into the function and add a . to the beginning, then use the style.background to it to get the value in css.

let allThemes = document.querySelectorAll('.theme-color');
allThemes.forEach(theme => theme.addEventListener('click', themeState()));
function themeState() {
  return function (event) {
    let classFilter = event.target.classList[1];
    console.log(classFilter);
    let helpDocument = document.querySelector(`.${classFilter}`);
    console.log(helpDocument);
  };
}

Something tells me I can't do this but honestly I cannot figure out any other way. Each class has a (class).style.background = undefined even though it has it set in CSS.

Help please.