Made some progress on intervals/timeouts but having an issue that is difficult to debug

First, here’s a link to my codepen: https://codepen.io/glennqhurd/pen/EQqxKe

The issue is that the buttonFlash function works correctly on its own, but when you hit the start button then click a button to try and follow the game it gives an error because the variable button in buttonFlash is object Object when I display it using console.log. This makes this code:

function buttonFlash(button) {
    console.log("button is: " + button);
    $("#" + button).css({ fill: buttonDict[button].flash });
    buttonDict[button].sound.play();
    setTimeout(function() {
      console.log(button);
      $("#" + button).css({ fill: buttonDict[button].color });
      buttonDict[button].sound.load();
    }, 300);
  }

not work because this part:

$("#" + button).css({ fill: buttonDict[button].flash });

is considered undefined where buttonDict[button].flash is undefined. I don’t know why it’s not working as intended, maybe an interaction with intervals/timeouts and how they treat SVG elements.

Your code has many issues. I will help you get started by first telling you your enableButtons function which runs after the clearInterval(sequence) line is creates a second onclick event handler for the arc buttons (seen below):

$("#arc1, #arc2, #arc3, #arc4").on("click", buttonFlash);

in addition to the one you have below.

  $("#arc1, #arc2, #arc3, #arc4").click(function() {
    buttonFlash(this.id);
    if(this.id === moveList[index]) {
      index++;
    }
    if(index >= moveList.length) {
      playerSuccess = true;
    }
  });

When you click one of the 4 arc buttons, both of these execute. I suggest you figure out which one of these you actually want to run when an arc button is clicked before moving on.

OK, so I rewrote this part:

$("#arc1, #arc2, #arc3, #arc4").on("click", buttonFlash);

to this:

$("#arc1, #arc2, #arc3, #arc4").on("click", function() {
    buttonFlash(this.id);
    if(this.id === moveList[index]) {
      index++;
    }
    if(index >= moveList.length) {
      playerSuccess = true;
    }
  });

for both the initial declaration and inside the enableButtons function. I know it’s redundant but I don’t know how to write it as a separate function while using the this keyword to represent multiple buttons. I then rewrote some of the logic for the sequence interval/timeout code and now it’s working somewhat correctly. By that I mean it works as intended but it’s not exactly like the Simon game yet. For example if you do the correct pattern with some wrong answers in between it’ll filter the correct pattern since I haven’t added a function to check for player errors. Also, if you add button presses at the end it’ll still pass you. And third of all, it doesn’t immediately do the next sequence after you successfully entered the right pattern, which if implemented would solve the previous problem of trailing button presses. Anyway, with that listed out and having fixed the button issue somewhat what do you suggest as the next step?