Rozwiązanie pewnie okaże się banalne, ale mam chwilowe zaćmienie. Pytanie brzmi jak w tytule, dlaczego funkcje startGame() i playMatch() nie wywołują się po przejściu pętli w funkcji restartGame() w tej gierce?
Ma to coś wspólnego z tym, że stałe playBtn, introScreen itd.. byłyby przypisane do danych selektorów po raz kolejny?
Poniżej problematyczne fragmenty kodu js:
const game = () => {
let pScore = 0;
let cScore = 0;
//start the game
const startGame = () => {
const playBtn = document.querySelector
('.intro button');
const introScreen = document.querySelector
('.intro');
const match = document.querySelector
('.match');
playBtn.addEventListener('click', () => {
introScreen.classList.add("fadeOut");
match.classList.add("fadeIn");
});
};
//play match
const playMatch = () => {
const options = document.querySelectorAll
('.options button');
const playerHand = document.querySelector
('.player-hand');
const computerHand = document.querySelector
('.computer-hand');
const hands = document.querySelectorAll(".hands img");
};
const updateScore = () => {
const playerScore = document.querySelector('.player-score p');
const computerScore = document.querySelector('.computer-score p');
playerScore.textContent = pScore;
computerScore.textContent = cScore;
restartGame();
};
const restartGame = () => {
if (pScore === 2 || cScore === 2) {
const match = document.querySelector('.match');
if (pScore > cScore) {
//match.classList.add('restart');
match.innerHTML = 'Gracz wygrywa mecz, Gratulacje';
match.textContent = 'Restart gry!';
} else {
if (pScore < cScore) {
//match.classList.add('restart');
match.innerHTML = 'Komputer wygrywa mecz. Odegraj się';
match.textContent = 'Restart gry!';
} else {
//match.classList.add('restart');
match.innerHTML = 'Remis pojedynku. Próbuj dalej';
match.textContent = 'Restart gry!';
}
}
startGame();
playMatch();
return;
}
};
//call of the inner function
startGame();
playMatch();
};
//start the game function
game();