Why can't use functions inside of loops in SoloLearn?

Question

Is there any way around this so that it works in SoloLearn?

function setupModeButtons() {
for(var i = 0; i < modeButtons.length; i++) {
modeButtons[i].addEventListener("click", function() {
modeButtons[0].classList.remove("selected");
modeButtons[1].classList.remove("selected");
this.classList.add("selected");
numSquares = (this.textContent === "Easy") ? 3 : 6;
reset();
});
}
}

Here's the full code: https://code.sololearn.com/WOfk5nUvFxDl/#js

Answer 1

Like @Calviղ has stated, but bind or call isn't needed you can just use the function name. Also, you are missing a few semicolons and will need to wrap your JS in an onload function.

window.onload = function () {
...
...
...
...
function buttonEvent() {
modeButtons[0].classList.remove("selected");
modeButtons[1].classList.remove("selected");
this.classList.add("selected");
numSquares = (this.textContent === "Easy") ? 3 : 6;
reset();
}

function setupModeButtons() {
for(var i = 0; i < modeButtons.length; i++) {
modeButtons[i].addEventListener("click", buttonEvent);
}
}

function squaresEvent() {
//grab color of clicked square
var clickedColor = this.style.background;
//compare clickedColor to pickedColor
if(clickedColor === pickedColor) {
messageDisplay.textContent = "Correct!";
changeColor(clickedColor);
h1.style.background = clickedColor;
resetButton.textContent = "Play Again?";
} else {
this.style.background = "#232323";
messageDisplay.textContent = "Try Again";
}
}

function setupSquares() {
for(var i = 0; i < squares.length; i++) {
//add click listeners to squares
squares[i].addEventListener("click", squaresEvent);
}
}
...
...
...
...
};

Note that your code will actually work with the functions where they are. The warning you're getting is because when you define the function in the loop it is being recreated each time the loop is ran instead of being created once and stored in memory and then being accessed as needed. This is inefficient.

You can also silence the warning by adding
/*jshint loopfunc:true */
to the top of the JS file.

Answer 2

Code wrote by anybody else ^^
Probably directly copied from this one (same JS error):
https://code.sololearn.com/WOfk5nUvFxDl/?ref=app

... or from another copy as any of these "sololearner's project" which have obviously same origin:
https://code.sololearn.com/WRuuhs9M3qAw/?ref=app
https://code.sololearn.com/WK18EMnLgjBb/?ref=app
https://code.sololearn.com/WfU8YF47Hi7K/?ref=app
...

However, probably not a sololearner paternity, as you could also find many others brothers of it on internet:
https://udel.edu/~sychen/GuessColorGame/guessColorGame.html
http://www.richardsondesigns.ca/colorGame.html
http://www.rgbchallenge.com

@@

At least, stole working and up-to-date projects :P

Answer 3

Use bind to get this object into the function.

function setupModeButtons() {
for(var i = 0; i < modeButtons.length; i++) {
modeButtons[i].addEventListener("click", evt.call(this));
}
}

function evt() {
modeButtons[0].classList.remove("selected");
modeButtons[1].classList.remove("selected");
this.classList.add("selected");
numSquares = (this.textContent === "Easy") ? 3 : 6;
reset();
}

Answer 4

😲🤦‍♂️