Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined.
This is the code in question:
const container = document.querySelector(".container")
const table = document.querySelector('table')
const numbers = []
var chosenNum
var chosenLength;
initialize()
function initialize() {
userChoice()
}
function playGame() {
var counter = 0
if (counter === cells.length) {
console.log('Done!')
} else {
const cells = document.querySelectorAll('td')
chosenNum = drawNum()
console.log(`The selected number is ${chosenNum}! Tap it!`)
// cells[idxOfEl].style.backgroundColor = 'yellow'
const idxOfCell = numbers.indexOf(chosenNum)
if (cells[idxOfCell].style.backgroundColor === 'red') {
counter++
}
numbers.splice(idxOfCell, 1)
}
}
function cellClicked(cell) {
const numInsideCell = parseInt(cell.innerText)
if (numInsideCell === chosenNum) {
console.log('Awesome!')
cell.style.backgroundColor = 'red';
playGame();
} else {
console.log('You tapped the wrong number.')
}
}
function drawNum() {
const idxOfEl = Math.floor(Math.random() * (numbers.length))
return numbers[idxOfEl]
}
// More functions and logic can be added here
Your feedback and suggestions for improvement are highly valuable. Feel free to share any insights you may have!