JS Challenge Project: Number Guesser

Project:

Question: It would seem that my function cpuVsHuman, is having some logic problems. When the human guess ties with the computer it should give the win to the human, but the function doesn’t seem to be comparing what’s returned from humanCalc and compCalc properly. However, the values both functions produce seem to be correct (I tested with some console.log()s that you will see below. If the target number = 6, human guess = 5, and computer guess = 2, the human should win but the comp is getting the win.

I am doing something wrong with my logic and I am hoping someone can help me spot what I am missing. Thank you!

*edit: I should note that I have not looked at the solution yet. I was hoping to troubleshoot without taking a peek first.

// Write your code below:

let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;

// The purpose of this function is to be called at the start of each new round in order to generate the new secret target number.
const generateTarget = () => Math.floor(Math.random() * 10);


// The purpose of this function is to be called each round to determine which guess is closest to the target number.

const compareGuesses = (humanGuess, compGuess, target) => {
    const humanCalc = () => {
        if (isNaN(humanGuess)) {
            alert("Please enter a number between 0 and 9.");
        } else {
            return Math.abs(humanGuess - target);
        }
    }

    console.log(humanGuess);
    console.log(compGuess);


    const compCalc = () => {
            return Math.abs(compGuess - target);
    }

    const cpuVsHuman = (guess1, guess2) => {
        console.log(guess1);
        console.log(guess2);

        if (guess1 === guess2) {
            return true;
        } else if (guess1 > guess2) {
            return false;
        } else if (guess1 < guess2){
            return true;
        }
    }
    cpuVsHuman(humanCalc(), compCalc());
}


// The purpose of this function is to be used to correctly increase the winner’s score after each round.

const updateScore = (winner) => {

    console.log(winner);
    
    if (winner === 'human') {
        humanScore++;
    } else {
        computerScore++;
    }
}


//The purpose of this function is to be used to update the round number after each round.

const advanceRound = () => {
    currentRoundNumber++;
}









/* FIRST VERSION 

// Write your code below:

let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;

// The purpose of this function is to be called at the start of each new round in order to generate the new secret target number.
const generateTarget = () => Math.floor(Math.random() * 10);


// The purpose of this function is to be called each round to determine which guess is closest to the target number.

const compareGuesses = (humanGuess, compGuess, target) => {
    const humanCalc = () => {
        if (humanGuess > target) {
            return humanGuess - target;
        } else if (humanGuess < target) {
            return target - humanGuess;
        } else if (humanGuess === target){
            return target;
        } else if (humanGuess < 0 || humanGuess > 9) {
            alert("Please enter a number between 0 and 9.");
        }
    }

    const compCalc = () => {
        if (compGuess > target) {
            return compGuess - target;
        } else if (compGuess < target) {
            return target - humanGuess;
        } else if (compGuess === target){
            return target;
        }
    }

    const cpuVsHuman = (humanCalc, compCalc) => {
        if (humanCalc === compCalc) {
            return true;
        } else if (humanCalc > compCalc) {
            return false;
        } else if (humanCalc < compCalc){
            return true;
        }
    }
}


// The purpose of this function is to be used to correctly increase the winner’s score after each round.

const updateScore = (winner) => {
    if (winner === 'human') {
        humanScore++;
    } else {
        computerScore++;
    }
}


//The purpose of this function is to be used to update the round number after each round.

const advanceRound = () => {
    currentRoundNumber++;
}

*/```

The compareGuesses function seems to be missing a return

cpuVsHuman(humanCalc(), compCalc());
should be
return cpuVsHuman(humanCalc(), compCalc());

adding a return didn’t work. After adding the return I ran my program and came up with the following:

Target: 4
Human Guess: 4
Comp Guess: 2

Because the human guessed the target correctly, this should be a win for the Human, but my program awards a point to the Comp and declares it the winner.

I presume that humanVsComp() returns true if the player scores, and false if the computer scores, yes? (With the player scoring in the event of a tie, currently.)

I’ve adjusted your code a little to make it easier to see what’s happening:

// Write your code below:

let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;

// The purpose of this function is to be called at the start of each new round in order to generate the new secret target number.
const generateTarget = () => Math.floor(Math.random() * 10);


// The purpose of this function is to be called each round to determine which guess is closest to the target number.

const compareGuesses = (humanGuess, compGuess, target) => {
    const humanCalc = () => {
        if (isNaN(humanGuess)) {
            alert("Please enter a number between 0 and 9.");
        } else {
            return Math.abs(humanGuess - target);
        }
    }

    console.log(`humanGuess: ${humanGuess}`);
    console.log(`compGuess: ${compGuess}`);
    console.log(`target: ${target}`);


    const compCalc = () => {
            return Math.abs(compGuess - target);
    }

    const cpuVsHuman = (guess1, guess2) => {
        console.log(`guess1: ${guess1}`);
        console.log(`guess2: ${guess2}`);

        if (guess1 === guess2) {
            return true;
        } else if (guess1 > guess2) {
            return false;
        } else if (guess1 < guess2){
            return true;
        }
    }
    console.log(`cpuVsHuman return value: ${cpuVsHuman(humanCalc(), compCalc())}`);
}


// The purpose of this function is to be used to correctly increase the winner’s score after each round.

const updateScore = (winner) => {

    console.log(winner);
    
    if (winner === 'human') {
        humanScore++;
    } else {
        computerScore++;
    }
}


//The purpose of this function is to be used to update the round number after each round.

const advanceRound = () => {
    currentRoundNumber++;
}

compareGuesses(2,6,2);
compareGuesses(3,6,4);
compareGuesses(4,6,5);
compareGuesses(5,6,9);

The output from my four function calls at the bottom is:

humanGuess: 2
compGuess: 6
target: 2
guess1: 0
guess2: 4
cpuVsHuman return value: true    <- human wins
humanGuess: 3
compGuess: 6
target: 4
guess1: 1
guess2: 2
cpuVsHuman return value: true    <- human wins
humanGuess: 4
compGuess: 6
target: 5
guess1: 1
guess2: 1
cpuVsHuman return value: true    <- human wins (tie)
humanGuess: 5
compGuess: 6
target: 9
guess1: 4
guess2: 3
cpuVsHuman return value: false   <- cpu wins

That looks right to me, based on the assumption of how your comparison is intended to work?

1 Like

What did you change other than clarifying the console.log outputs? When I replace my code with the code you provided, my program still isn’t running. Checking the console logs, I see that cpuVsHuman does out put true and false correctly, but in the case of:

target: 9
human guess: 5
comp guess: 4
return: true
(however comp is awarded the point and declared the winner.

I also tried updating the updateScore function so that if (winner === true) { humanScore++} else { computerScore++;} but i think this program is passing in a string of either “human” or “computer” and it checks based on the string returned from another function in the js files that contains the actual program itself.

Am I making any sense?

If your code is awarding points, you’ve not provided the code you’re running because what you’ve provided isn’t joined up.

Absolutely nothing, but I get the sense that what you’ve provided above is not the full extent of what you’re running now.

Sorry about that, you are correct, my code is only a piece of the program. The task was to create 4 functions that did specific things. The code above (game.js) calls these 4 functions to complete the program. Here is the base code that was provided for me:

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);
});

Ahhhhhh, sorry! I really ought to have looked at the project, would’ve been painfully obvious then that you’re writing code to plug into the existing boilerplate game.js :man_facepalming:

Right. If we plug your code into the larger project, and most importantly add a console.log() at line 30 like so:

 // Determine if the human or computer wins:
  const humanIsWinner = compareGuesses(currentHumanGuess, computerGuess, target)
  console.log(`humanIsWinner? ${humanIsWinner}`);
  const winner = humanIsWinner ? 'human' : 'computer'

…we get the following coming back in the Dev Tools:

humanIsWinner? undefined

…so the problem is exactly as @janbazant1107978602 said above:

If I add the fix which Jan suggested to the code you originally posted (and which I added the console.log() calls to), the game seems to work fine. :slight_smile:

@thepitycoder Thank you for breaking that down a bit more. Honestly I am not sure how I originally missed the fix by @janbazant1107978602, it worked just fine. I must have had some brain cells crossed and some errand lines of code that were confusing things for me on my end (I also had a local version and the version on codecademy so I was probably just a bit confused).

Thank you both @janbazant1107978602 & @thepitycoder for helping me to trouble shoot what I missed. I hope you had a great Holiday!

1 Like