I had a quick look and there are a lot of problems with the JavaScript. If I’m not mistaken, the relevant functions seem to be:
for (var j = 0; j < arr.length; j++) {
performEffect(arr[j]);
}
function performEffect(def) {
col = $("#" + def).css("background-color");
$("#" + def).css("background-color", "white");
original(j + 1);
}
function original(m) {
setTimeout(function() {
console.log(arr[j]) // returns undefined because this function does not have access to j
$("#" + arr[j]).css("background-color", col);
}, 1000 * m);
}
The reason that the colour isn’t changing back is because the function, original(m)
, does not have access to j
in the for
loop, therefore arr[j]
in that function will always be undefined
.
In fact, if you move the setTimeout
method to inside the performEffect(def)
function, you will see the colour change back to what you intend it to be; alternatively, you can pass def
into original()
and you will also see the colour change.
If I’m not mistaken there are other variable scoping issues (and potentially also async issues) that you will run into even if you will have fixed this. A few things that you may find useful moving forward:
You should tidy up your JavaScript a little by using the “Tidy JS” option in CodePen (in the dropdown menu to the top-right corner of the JavaScript area)—that will make things a lot easier for someone reviewing your code and also faster for yourself to maintain. You should also consider giving variables meaningful names (such as buttonColour
instead of col
). If you have time, you may want to read through a JavaScript style guide, too.
The Simon Game is reasonably difficult and the problems you have encountered themselves aren’t trivial, but it will be super rewarding if you spend the effort to figure it out. Good luck! 