What is the best method of changing the color of an SVG element by modifying the CSS code in a way that changes the Javascript code?

Question

I've been writing a codepen for the game Simon and I was asked to rewrite it so that if somebody like an artist that was working with me had access to the html and css but didn't know how javascript worked (or didn't have access to the .js files) wanted to change the colors of the buttons they could do so w/o changing the javascript code. So my plan is to write the js code such that it adds/removes classes that affect the path elements. The path elements are like this:

<path class="outer arc1default" id="arc1"/>

with these css classes:

.outer {
  stroke: black;
  stroke-width: 10;
}

.arc1default {
  fill: red;
}

if the color changes on click by design, this class gets added:

.arc1flash {
  fill: pink;
}

On line 73 of the .js code I'm using the following:

function buttonFlash(button) {
    console.log("button is: " + button);
    //$("#" + button).attr("class", button + "flash outer");
    //$("#" + button).removeClass(button + "default");
    $("#" + button).addClass(button + "flash");
    //$("#" + button).css({ fill: buttonDict[button].flash });
    buttonDict[button].sound.play();
    setTimeout(function() {
      $("#" + button).attr("class", button + "default outer");
      //$("#" + button).css({ fill: buttonDict[button].color });
      buttonDict[button].sound.pause();
      buttonDict[button].sound.currentTime = 0;
    }, 300);
  }

The code in // notation is what I was trying before and wasn't working at the time but I've left it in for reference in case I missed something and used it incorrectly but was on the right path.

Anyway, here's the results I've observed:

If I start the element w/ fill:red using the id in CSS, it starts red and stays red when classes get added/removed.

If I remove that part of the code but start the path element w/ a class that says fill:red then it starts red again (which is good) but when classes get removed/added nothing changes.

If I remove the fill:red from the element and do NOT add the class in question, it starts as if it has fill:black, probably because the outer class does a stroke: black for the border.

Here's the link to my codepen in case that helps: https://codepen.io/glennqhurd/pen/EQqxKe

To reiterate, I'm not asking about how to use Javascript to change the CSS. I'm asking how to use Javascript to change the classes of the HTML objects in such a way to change the properties of the objects w/o changing the classes themselves.

Answer 1

You have to use .attr() on a svg... Since .addClass() and .removeClass does not work. See this other answer about it .

Now you have to use the same class "name structure" on the 4 colors (like arc1default and arc1flash ) if you want to concatenate default/flash to the button .

I updated your CodePen

function buttonFlash(button) {
  console.log("button is: " + button);
  $("#" + button).attr("class", "outer " + button + "flash");

  buttonDict[button].sound.play();
  setTimeout(function() {
    $("#" + button).attr("class", "outer " + button + "default");
    buttonDict[button].sound.pause();
    buttonDict[button].sound.currentTime = 0;
  }, 300);
}