Number Guesser

Projects
1

I’ve been trying to fiddle around with this code for a while on this project, spending about an hour trying to figure out what’s wrong. There’s no syntax error yet the code doesn’t seem to function whereas the I put in a human guess and click “Make A Guess”, but nothing happens. I’ve been going back and forth between the game.js and script.js files to see if there’s something off between, but haven’t pinned anything down.

Here’s my code:

let humanScore = 0;

let computerScore = 0;

let currentRoundNumber = 1;

// Write your code below:

// Generates a random target number

const generateTarget = () => {

    return Math.floor(Math.random() * 10)

}

/* This function compares the number choose from the human and computer

   as well as which guess was closer to the secret target number

*/

const compareGuesses = (humanGuess, computerGuess, secret) => {

    let user1 = Math.abs(humanGuess - secret)

    let comp1 = Math.abs(computerGuess - secret)

    if (userGuess >= 9 || userGuess < 0) {

        return 'Please pick a number between 0 and 9!'

    }

    if (user1 < comp1 || user1 === comp1) {

        return true;

    } else if (comp1 < user1) {

        return false;

    }

}

// This updateScore function updates the score based on whether the human or computer wins

const updateScore = winner => {

    if (winner === 'human') {

        humanScore += 1;

    } else if (winner === 'computer') {

        computerScore += 1;

}

// Advances the round Number    

const advanceRound = () => {

    currentRoundNumber += 1;

}
2

Hello @gesro_dragon, welcome to the forums! It doesn’t appear that you’re calling your functions anywhere. Remember that functions must be called in order for the code to run:

function someFunc(){
  console.log("This won't be printed unless the function is called");
}

someFunc();
//function called. output:
>>This won't be printed unless the function is called
3

That’s the thing though, the functions are called through the game.js file that is linked to the script.js file. The code shown there is the script.js file which is why I didn’t call any of the functions.

4

Can you post script.js as well, please?

5

I’ve posted the script.js already as shown in the code above, though here is the game.js code:

let target;

const humanGuessInput = document.getElementById('human-guess');

const roundNumberDisplay = document.getElementById('round-number');

const computerGuessDisplay = document.getElementById('computer-guess');

const humanScoreDisplay = document.getElementById('human-score');

const computerScoreDisplay = document.getElementById('computer-score');

const targetNumberDisplay = document.getElementById('target-number');

const computerWinsDisplay = document.getElementById('computer-wins');

const guessButton = document.getElementById('guess');

const nextRoundButton = document.getElementById('next-round')

guessButton.addEventListener('click', () => {

  // Generate the target value

  target = generateTarget();

  // Retrieve the player's guess

  const currentHumanGuess = humanGuessInput.value;

  // Make a random 'computer guess'

  const computerGuess = Math.floor(Math.random() * 10);

  // Display the computer guess and the target

  computerGuessDisplay.innerText = computerGuess;

  targetNumberDisplay.innerText = target;

 

  // Determine if the human or computer wins:

  const humanIsWinner = compareGuesses(currentHumanGuess, computerGuess, target)

  const winner = humanIsWinner ? 'human' : 'computer'

  // Update the correct score:

  updateScore(winner);

  // Display the winner

  if (humanIsWinner) {

    guessButton.innerText = 'You Win!!!!!';

    guessButton.classList.toggle('winning-text')

  } else {

    computerWinsDisplay.innerText = 'Computer Wins!!!';

  }

  // winnerDisplay.innerText = humanIsWinner ? 'You win!' : 'Computer wins!';

  // Display the current scores:

  humanScoreDisplay.innerText = humanScore;

  computerScoreDisplay.innerText = computerScore;

 

  // Set the correct disabled state for the buttons

  guessButton.setAttribute('disabled', true)

  nextRoundButton.removeAttribute('disabled');

});

nextRoundButton.addEventListener('click', () => {

  // Increase the round number

  advanceRound();

  // Display the new round number

  roundNumberDisplay.innerText = currentRoundNumber;

  // Set the correct disabled state for the buttons

  nextRoundButton.setAttribute('disabled', true);

  guessButton.removeAttribute('disabled');

  // Reset the guess input box and the target number display:

  targetNumberDisplay.innerText = '?';

  guessButton.innerText = 'Make a Guess';

  humanGuessInput.value = '';

  computerGuessDisplay.innerText = '?';

  computerWinsDisplay.innerText = '';

  guessButton.classList.remove('winning-text');

});

const addButton = document.getElementById('add');

const subtractButton = document.getElementById('subtract');

addButton.addEventListener('click', () => {

  humanGuessInput.value = +humanGuessInput.value + 1;

  handleValueChange(humanGuessInput.value);

});

subtractButton.addEventListener('click', () => {

  humanGuessInput.value = +humanGuessInput.value - 1;

  handleValueChange(humanGuessInput.value);

});

const handleValueChange = value => {

  if (value > 0 && value <= 9) {

    subtractButton.removeAttribute('disabled');

    addButton.removeAttribute('disabled');

  } else if (value > 9) {

    addButton.setAttribute('disabled', true);

  } else if (value <= 0) {

    subtractButton.setAttribute('disabled', true);

  }

}

humanGuessInput.addEventListener('input', function(e) {

  handleValueChange(e.target.value);

});
7

Haven’t said this enough, if we’re following the lesson to the letter, warts and all, there should be no need to mess with any code, apart from writing exactly what is asked for. That gets us through the checkpoints.

There are some warts, but one needs to consider every little fix very carefully. Don’t do it by adding code. Do it by adjusting the existing code.

From the first time I laid into this lesson it was with disappointment that there would be any errors. It should have been a walk in the park the way the lesson and provided code is structured. Instead, somebody decided it was good enough to go into production and ignored any review. The warts have been there since day one. Years ago.

The best thing that could happen would be someone present viable fixes for the existing code without adding to it. Make it possible for a learner to get an actual working version from the instructions in the lesson plan.

8

const compareGuesses = (humanGuess, computerGuess, secret) => {

let user1 = Math.abs(humanGuess - secret);

let comp1 = Math.abs(computerGuess - secret);

return user1 <= comp1;

// if (userGuess >= 9 || userGuess < 0) {

// return “Please pick a number between 0 and 9!”;

// }

// if (user1 < comp1 || user1 === comp1) {

// return true;

// } else if (comp1 < user1) {

// return false;

// }

};

after you declared user1 and com1 no need for an if statement, I tried it and worked just fine, good luck!