im makeing a face matching game and wanted to make a way of counting how many times you picked right in the alerty message would I put the counting code info in the game over function or would i make a new function to put it in the last child of the left side only?
<body onload='generateFaces()'>
<h1>'Matching Game'</h1>
<p>'Click on the extra face on the left.'<p>
<div id='leftSide'></div>
<div id='rightSide'></div>
<script>
let numberOfFaces = 5;
const theLeftSide= document.getElementById('leftSide');
const theRightSide= document.getElementById('rightSide');
function generateFaces(){
for (let i=0; i < numberOfFaces; i++) {
const face= document.createElement('img');
face.src= 'image/smile.png';
const randomTop = Math.floor(Math.random()*400) +1;
const randomLeft = Math.floor(Math.random()*400) +1;
face.style.top = randomTop + 'px';
face.style.left = randomLeft + 'px';
theLeftSide.appendChild(face);
}
const leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
theLeftSide.lastChild.addEventListener('click', nextLevel);
document.body.addEventListener('click', gameOver);
}
function nextLevel() {
event.stopPropagation();
numberOfFaces += 5;
while (theLeftSide.lastChild) {
theLeftSide.removeChild(theLeftSide.lastChild);
}
while (theRightSide.lastChild){
theRightSide.removeChild(theRightSide.lastChild);
}
generateFaces();
}
function gameOver() {
alert('GaMe OvEr! !\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum.');
document.body.removeEventListener('click', gameOver);
theLeftSide.lastChild.removeEventListener('click', nextLevel);
}
</script>
</body>
You will need to declare a variable to store how many times a user has clicked on the last node. For e.g. let num = 0; And then small addition in your nextLevel() function i.e. num = num + 1;. To display it on the screen, you have to declare separate HTML tag. Then you can go with document.getElementById('clicked').innerText = num + ' times user has clicked';. It will work properly.