Number Guesser Project

Hi there.

I am currently working on a number guesser project and have got it working almost perfectly, but a few things that I didn’t understand in the code provided on the completed version that I was trying to replicate.

Here is my code:

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

const generateTarget = () => {
    return Math.floor(Math.random() * 10);
}

const compareGuesses = (humanGuess, computerGuess, targetGuess) => {
    const targetGuess = generateTarget;
    const humanDifference = Math.abs(targetGuess - humanGuess);
    const computerDifference = Math.abs(targetGuess - computerGuess);
    return humanDifference <= computerDifference;
}

console.log(compareGuesses(2,7));

const updateScore = score => {
    if (compareGuesses === true) {
        score = humanScore++;
    } else if (compareGuesses === false) {
        score = computerScore++;
    }
}

const advanceRound = () => currentRoundNumber++;

And here is the code I am trying to replicate:

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

const generateTarget = () => {
  return Math.floor(Math.random() * 10);
}

const compareGuesses = (humanGuess, computerGuess, targetGuess) => {
  const humanDifference = Math.abs(targetGuess - humanGuess)
  const computerDifference = Math.abs(targetGuess - computerGuess)
  return humanDifference <= computerDifference;
}

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

const advanceRound = () => currentRoundNumber++;

On line 9 of the sample code, they call a parameter ‘targetGuess’, however targetGuess is never referred to anywhere else, and is never correlated with ‘generateTarget’, so how is it managing to get the number from ‘generateTarget’?

In my code, i have added a variable that links the two together on line 12, but it doesn’t work, and if I remove line 12, the code runs perfectly.

Note: there is a seperate file called game.js, but i have checked through there and there is no mention of a ‘targetGuess’. Here is the code from that file if you want to look for yourself.

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

Sorry if im being an idiot. I appreciate any assistance.

Why would you want to overwrite a parameter?

Parameters get there value from arguments at function call:

console.log(compareGuesses(2,7));

so 2 is passed to humanGuess parameter, 7 is passed to computerGuess. You don’t provide an argument/value for the targetGuess parameter.

but you should pass the targetGuess as argument, not overwrite the parameter within the function.

finally, here:

const targetGuess = generateTarget;

now targetGuess will be a function, you forgot to invoke/call the generateTarget function.

1 Like

Hi there,

Sorry if i wasn’t clear. I was using the console.log just to test something, and it isn’t part of the final code.

My question was essentially, on the code above, targetGuess is called as a parameter, but I can’t see it being used anywhere else on the sample code, or on the other .js file. How does targetGuess get the information from generateTarget if I can’t see anything linking the two of them together?

Sorry if im being an idiot.

Cheers

In your test, you forgot to supply an argument for your parameter when you called compareGuesses function

in game.js its also used:

// Generate the target value
target = generateTarget();
// some other code
// Determine if the human or computer wins:
  const humanIsWinner = compareGuesses(currentHumanGuess, computerGuess, target)

see? target is used as argument for targetGuess parameter.

1 Like

Thank you :slight_smile:.

I kinda get it now. target is also linked to generateTarget, so it gets the information there. So what is the specific’s around why target and targetGuess are linked?

Is it because they both share the same word? Or is it because they both share the same place within the compareGuesses function (both being in the 3rd ‘slot’ in the brackets).

Cheers again :stuck_out_tongue:, still not used to the syntax of Javascript.

linked is not the word I would use. The function (generateTarget) returns a value, which we store in a variable.

have function parameters and arguments not been explained?

yes, parameters and arguments are positional.

1 Like

Thank you.

I get it now.

I have been learning about functions and parameters, but not about how they link if they are in the same position.

I think I perhaps looked a bit too far into the sample task, as I believe it was created so that I can enter anything into the code, and some of the hard work of converting it was already created. I was using the dev tool on chrome to look at the code of the final product, which may of confused me even more than when I started.

Im sure all that stuff will be explained in time, I just need to stop getting ahead of myself :slight_smile:

Cheers again for all the help on this, and on the other questions I have asked about other stuff.

1 Like