**
update: figured out THAT particular problem. Now I need to console.log the scores and increment it when either player wins. I made sure to update my code on Github
**
I have been beating my brains out for the past few days trying to figure out why the functions being called are undefined.
Here is how the console.log looks at the start of the game:
Expected Outcome:
When the playRound() is called, the if/else statements should be console.logging the correct statements. Like so:
const playRound = (playerSelection, computerSelection) => {
playerSelection = playerWeapon();
computerSelection = selectedWeapons();
console.log("playerWeapon: ", playerSelection);
console.log("computerWeapon: ", computerSelection);
if (computerSelection === "📜" && playerSelection === "🪨") {
console.log("Computer Wins!");
} else if (playerSelection === "📜" && computerSelection === "🪨") {
console.log("You Win!");
}
if (computerSelection === "✂" && playerSelection === "📜") {
console.log("Computer Wins!");
} else if (playerSelection === "✂" && computerSelection === "📜") {
console.log("You Win!");
}
if (computerSelection === "🪨" && playerSelection === "✂") {
console.log("Computer Wins!");
} else if (playerSelection === "🪨" && computerSelection === "✂") {
console.log("You Win!");
}
if (computerSelection === playerSelection) {
console.log("Tie!");
}
}
Once I am able to get the code working properly, I will then use DOM manipulation, to have the game results displayed on the webpage instead of the console.
Current Outcome:
In the playRound(), I am calling both the selectedWeapons() and playerWeapon(). But both of the functions, are undefined and I am unable to get the values in the playRound() to use for the if/else statements. BUT, the only console.log message that's given is "Tie".Why is that? 🤔
I tried creating other functions, calling functions in other functions.I've also been playing around with the for..loops and event listeners.
Here is the console.log after playing a few rounds:
Any help is greatly appreciated.
Top comments (12)
Well for the starters the function playerWeapon and selectedWeapons should return something, so that your vars can hold the value they return.
Why its returning "Tie" is because
Tip: create local variable inside your function, do not take them as argument and modify them (this is mutation and its bad)
Thank you so much for your help. But thankfully I actually figured it out myself. The only thing is, now I have a new problem lol. Now I need to figure out how to show the scores and increment it when either player wins🤔
In JavaScript, there is a concept of truthy and falsy values. When used in place of booleans, all values except for
false,0,""(empty string),null,undefined, andNaNwill evaluate astrue, because they are considered truthy.In your code
the
playerWinvariable always evaluates totruebecause you've defined it as "You Win!", which is a non-empty string, which in turn is truthy. Same goes for thecomputerWinvariable.You should have boolean variables which are reset to
falseeach round, and then one of them is set totruein the if-blocks, where you compare the inputs to determine who wins.As to how to show the score, do it in the same way as you update the weapons each round.
Hope this helps!
Thank you for the help. But I've finally figured it out myself. Here is the solution I came up with:
Eventually I will remove all the console.log's and clean up the code a bit, once I have everything working the way it should.
Yep, that's the way to do it - first get the code working, then clean it up (also known as refactoring).
When refactoring, consider incrementing the score and updating the UI in one place only. That way, if you need to change anything about the score logic or the HTML elements change, you'll need to change it once, instead of 6 times.
This may not be as important for this throwaway project, but it's a well-known software development principle called DRY (Don't Repeat Yourself). Eliminating duplicate code leads to a codebase which is more readable and much less error-prone.
Anyways, congrats on figuring it out and good luck with your next challenges!
Thank you so much! I've finished my project and here's the end result
And yes I am very aware of DRY. I try to not have duplicate code.
Great job!
Thanks!
Well done, you have completed it, but i think instead of using if else and repeated code, you should use a hash map
To do so you have to use "Map" datatype available in JS, then do the mapping for what beats what
Then you can get the mapped value by using player weapon as a key for the hash map and if that value is equal to the computer selection, then player has beat the computer else its a win for the computer
Edge case will be to check first if both have selected a same weapon and then check the mapping.
Thank you for showing me a different perspective on writing code. But hash mapping is way too advanced for me right now. But I will definitely keep this as a future reference for when I get more advanced with using JavaScript.
Happy to help, however hash-map is advance, but here the problem is not that complex, so you should try it, once you start using the correct data structure, you will fall in love with them and effectively it will help you excel programming.
Nice and concise - love it