I am working with two functions. The first function takes the input from users in a text box, appends it to a div, and then displays it on the HTML page. The second function is supposed to change the styling of the word entered by the user, alternating the color and background for each word. However, I am facing some issues with the second function. Since I have never created an array using jQuery before, I suspect there might be a syntax error causing my code to run as if the second function doesn't exist. Any advice or suggestions would be greatly appreciated.
Thank you
Below are the two functions:
function listWordsUsed(wordUsed) {
var userTrials = $('#userGuesses');
var divisor = $("<div>" + wordUsed + "</div>");
divisor.hide().appendTo(userTrials).fadeIn(7000);
return;
} //End of function listWordsUsed(wordUsed)
function addStyleToAnswers(wordUsed) {
listWordsUsed(wordUsed);
theGuess = $("div").toArray();
for (i=0; i< theGuess.length; i++)
{
if (i % 2 == 0)
{
$("#userGuesses").addClass("oddGuess");
} //if (i % 2 = 0)
else
{
$("#userGuesses").addClass("evenGuess");
} //else
} //for (i=0; i< wordUsed.length; i++)
} //function addStyleToAnswers(wordUsed)
Here is the CSS related to these functions:
.oddGuesses {
color: orange;
background-color: blue;
}
.evenGuesses {
color: blue;
background-color:orange;
}