Recursive function messed up my counters

JavaScript
1

I decided to begin javascript projects based on my understanding of it so far. I called a function within itself and suddenly my counters aren’t adding up as expected during an if-else condition. It does work well when you don’t make a mistake but if you do and attempt to keep running it, the numbers begin to multiply instead of add. Here is my code:

JavaScript:
const myInput = document.querySelector(’.myInput’)
const message = document.querySelector(’.message’)
const attempts = document.querySelector(’.attempts’)
const progress = document.querySelector(’.progress’)
const question = document.querySelector(’.question’)
const rightScore = document.querySelector(’.rightScore’)
const wrongScore = document.querySelector(’.wrongScore’)

let rightAnswer = 6
let bullsEye = 0
let badMiss = 0
let tries = 0

// Using ‘Enter Key’
function loopIt(){
myInput.value = ‘’
myInput.addEventListener(‘keyup’, function(e){
progress.style.display = ‘block’
question.style.display = ‘none’
if(e.key == ‘Enter’){
let mySubmission = myInput.value
tries++
attempts.innerHTML = tries
if (mySubmission == rightAnswer){
bullsEye++
rightScore.innerHTML = bullsEye
message.innerHTML = ‘good job’
setTimeout(function(){
loopIt(mySubmission)
}, 1500)
return
} else {
badMiss++
wrongScore.innerHTML = badMiss
message.innerHTML = ‘try again’
return
}
}
})
}

HTML:

Magic Number 
<link rel="stylesheet" href="/style.css">

<div>
  <p class="question">
    Can you guess the number behind this game? Clue: it is between 1 and 10
  </p>
  <input type="text" class = "myInput">
  <p class="message"></p>
  <p class = "progress">Attempts: <span class = "attempts"> ~ </span> | Correct: <span class="rightScore"> ~ </span> | Incorrect: <span class="wrongScore"> ~ </span></p>
</div>

<script src="/script.js" defer></script>

CSS

*{
text-align: center;
font-family: “Benton Sans”, “Helvetica Neue”, helvetica, arial, sans-serif;
margin: 2em;
}
input{
margin-top: 7%;
padding: 12px;
width: 25rem
}
.attempts{
font-style: bold
}

.rightScore {
color: green
}

.wrongScore {
color: red
}

.progress {
display: none;
}

. Looking forward to getting this right so I could continue.

2

It’s kinda hard to read your code not properly formatted. I’m not sure why all the underscores are there.

As for your recursion, you’re only adding multiple keyup listeners every 1500ms. What are you trying to do? Your code basically causes a single key stroke to fire off a recursive amount of keyup listeners.

3

Do you have this on a codepen or a repl somewhere we can bang on it?

4

I want to register the number of times a user guessed the magic number correctly. So if they guessed it right, the function will fire again and the ‘bullsEye’ will increment by 1, otherwise, badMiss increments by 1. Tries will keep increasing by 1 each time the user presses the Enter button.

5

codepen. io/rexdavinci/pen/JxXpZe

6

Whatever you are doing is total mess. You add new listener to the keyup event each time player guesses correctly.
What happens then is like this:

  • initialy there is 1 listener to keyup event that runs your function
  • if that listener function founds that guess is correct, it runs loopIt, and that function adds another listener
  • now each time keyup even is pressed it calls 2 functions

Create real, not arrow function to add to the listener like this:
myInput.addEventListener('keyup',someListener );
And you will avoid it adding infinite amount of functions to it, because it will know it is duplicate if you try to add it again.
And just place your arrow function in normal one like this:

  function someListener(e) {
// stuff from arrow function
}

Finally, I have no clue why you would have this recursion in the first place, you can just reset state instead of calling initial function again.

7

Thanks everyone and arigoru, your explanation worked magic, please understand that the code is part of a project I am building and it is the first project I will take up. I have struggled with what is wrong for some time before deciding to ask here and I am glad I did. You just boosted my confidence in the path of coding and for that I thank you.

1 Like