Javascript and calling a function recursively? I didnt attach the html portion b
ID: 3600666 • Letter: J
Question
Javascript and calling a function recursively?
I didnt attach the html portion but I'm hoping someone can see the error or provide some guidance
It's a bingo game that generate a 4x4 board with random numbers. I'm having issues with the bolded part
// This jQuery function verifies that the HTML document has loaded
$(document).ready(function()
{
// TODO Create a var called usedArray of type Array with declared size 76 for the used bingo
// numbers when generating the card
var usedArray = new Array(76);
/* The baseArray provides the base multiplier value for each column based on
B = 1 - 15
I = 16 - 30
N = 31 - 45
G = 46 - 60
O = 61 - 75
*/
var baseArray = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
// TODO Create a global var called number and initialize it to 0
var number = 0;
// TODO Create a global var called base and initialize it to 0
var base = 0;
// TODO call function init()
init();
// TODO Declare function init()
// it is the main function of the JavaScript and jQuery that manages
// the bingo card creation and updating during play
function init()
{
// TODO Write a for loop that loops 24 times and calls function fillCard()
// passing the counter var as an argument
for (var i = 0; i < 24; i++)
{
fillCard(i);
}
}
// TODO Declare function fillCard(i), it receives with one parameter
// This function fills the bingo card
function fillCard(i)
{
// TODO update global variable base and set it equal to the element in
// array baseArray using the passed in parameter i as the index multiplied
// by the value 15
base = baseArray[i] * 15;
// TODO update global variable number and set it equal to the value of
// global variable base added to a randomly selected number in the
// range of 1 - 15
number = base + Math.floor(Math.random() * 15) + 1;
// TODO Write an if condition that checks if the randomly generated number
// has not been used
if (usedArray[number] != true)
{
// the jQuery updates the HTML tag element with id "cell#"
// where the # is the random number!
$('#cell' + i).html(number);
// TODO update the used number array setting the location in the array
// to true to indicate that the value has been used
usedArray[number] = true;
// set the background and text color for new game
var id = "cell" + i;
document.getElementById(id).style.backgroundColor = "#eee";
document.getElementById(id).style.color = "#333";
}
// TODO Write the else leg of the above if condition
else
{
// TODO using recursion call this function again
fillCard(i);
}
}
// TODO Declare function resetUsedNumbersArray()
// This function resets the used number array for a new card
function resetUsedNumbersArray()
{
// TODO Write a for loop that loops for the length of the array of used
// numbers and set the value of each array element to false
for (var j = 0; j < usedArray.length; j++)
{
usedArray[j] = false;
}
}
// This jQuery function responds to an HTML tag element with id = newCard being clicked
$('#newCard').click(function()
{
// TODO Call function resetUsedNumberArray to reset the used numbers
resetUsedNumbersArray();
// TODO call function init to generate a new bingo card
init();
});
// This jQuery function toggles the backgroundColor and text color
// based on what is it currently set to
$('td').click(function()
{
var toggle = this.style;
toggle.backgroundColor = toggle.backgroundColor? "":"#333";
toggle.color = toggle.color? "":"#fff";
});
});
Explanation / Answer
var baseArray = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
// TODO Create a global var called number and initialize it to 0
var number = 0;
// TODO Create a global var called base and initialize it to 0
var base = 0;
// TODO call function init()
init();
// TODO Declare function init()
// it is the main function of the JavaScript and jQuery that manages
// the bingo card creation and updating during play
function init()
{
// TODO Write a for loop that loops 24 times and calls function fillCard()
// passing the counter var as an argument
for (var i = 0; i < 24; i++)
{
fillCard(i);
}
}
// TODO Declare function fillCard(i), it receives with one parameter
// This function fills the bingo card
function fillCard(i)
{
// TODO update global variable base and set it equal to the element in
// array baseArray using the passed in parameter i as the index multiplied
// by the value 15
base = baseArray[i] * 15;
// TODO update global variable number and set it equal to the value of
// global variable base added to a randomly selected number in the
// range of 1 - 15
number = base + Math.floor(Math.random() * 15) + 1;
// TODO Write an if condition that checks if the randomly generated number
// has not been used
if (usedArray[number] != true)
{
// the jQuery updates the HTML tag element with id "cell#"
// where the # is the random number!
$('#cell' + i).html(number);
// TODO update the used number array setting the location in the array
// to true to indicate that the value has been used
usedArray[number] = true;
// set the background and text color for new game
var id = "cell" + i;
document.getElementById(id).style.backgroundColor = "#eee";
document.getElementById(id).style.color = "#333";
}
// TODO Write the else leg of the above if condition
else
{
// TODO using recursion call this function again
fillCard(i);
}
}
// TODO Declare function resetUsedNumbersArray()
// This function resets the used number array for a new card
function resetUsedNumbersArray()
{
// TODO Write a for loop that loops for the length of the array of used
// numbers and set the value of each array element to false
for (var j = 0; j < usedArray.length; j++)
{
usedArray[j] = false;
}
}
// This jQuery function responds to an HTML tag element with id = newCard being clicked
$('#newCard').click(function()
{
// TODO Call function resetUsedNumberArray to reset the used numbers
resetUsedNumbersArray();
// TODO call function init to generate a new bingo card
init();
});
// This jQuery function toggles the backgroundColor and text color
// based on what is it currently set to
$('td').click(function()
{
var toggle = this.style;
toggle.backgroundColor = toggle.backgroundColor? "":"#333";
toggle.color = toggle.color? "":"#fff";
});
});
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.