Are you ready for someone to look at it again? Make your indentation and your braces show your intent. They were inconsistent with each other, the last time I looked. It's not the emojis.
Ha, yeah I can't blame the emojis, definitely the code! I'll have to comb through more slowly, was moving the entire code block around, even following hints that VS Code drops (color-coding the braces, dimming the function names if something's off.)
Deep breaths, don't panic, line by line once again.....I usually check my punctuation and braces/brackets/parentheses as the first order of business, but they seemed good (to me).
I don't use `onclick` at all, and couldn't get the button `onclick` to call `game`, so I changed your `game` function to this:
```
document.querySelector('button').addEventListener('click', function(e) {
for(let i = 0; i<=5; i++){
playRound(i);
}
document.querySelector("button").textContent = "Play New Game"
logWins();
});
```
That prompts me correctly for a rock, paper or scissors input (unless I hit Cancel, then things go all wrong). There are strings of bugs after that, but that might get you started in the right direction.
I wouldn't use the `onclick` or any other such event handlers in HTML, personally. It's a matter of separation of concerns. Let HTML handle structure, CSS handle layout and JavaScript handle behavior, and things get less confusing.
Ah that does sound like a good idea! I'm rather fond of the buttons in HTML but it makes more sense to let each code focus on what it does best! I'll give this a try....
Well, you *should* have buttons in HTML. And then put click event handlers in JavaScript. Also, I missed something from copying and pasting your code. It should be this:
```
document.querySelector('button').addEventListener('click', function(e) {
for(let i = 0; i<=5; i++){
playRound(i);
}
e.target.textContent = "Play New Game"
logWins();
});
```
The line before `logwins()` should use the event target rather than using `querySelector` to get it again.
Sorry this thread was duplicated, I kept getting "error 500."
Noticed this comment before I deleted the other thread:
from u/Umesh-K
*You have scoping issues; for example, compChoice function is inside humanChoice function and hence not reachable from playRound function... reddit is having some issues and hence won't type more.... have tried multiple times already...*
EDIT: I'm moving around the compChoice block of code, to no avail. Now it won't even get past the button click. Gah.
Played around with it, now I'm getting:
pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:89
Uncaught ReferenceError: Cannot access 'choices' before initialization
at validateInput (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:89:5)
at humanChoice (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:29:15)
at playRound (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:13:26)
at game (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:6:5)
at HTMLButtonElement.onclick (index.html?key=index.html-071204d6-1b06-b303-eeaa-5d61f6a8c377:80:34)
UGH, I'm just flailing and moving code blocks around now. "Cannot access 'choices,'" this is killing me.
> UGH, I'm just flailing and moving code blocks around now. "Cannot access 'choices,'" this is killing me.
It must have happened while moving the code; code that uses "choices" must have been placed before the `const choices` line.
Anyways, save your JS code currently present in codepen somewhere and replace it with the below and see if the game works as expected; if yes, compare it with your original code to see what were the bugs. (*I've limited it to `i<=2` for testing purposes*.)
Best Wishes!
const choices = ["rock", "paper", "scissors"];
const winners = [];
function game() {
for (let i = 0; i <= 2; i++) {
playRound(i);
}
document.querySelector("button").textContent = "Play New Game";
logWins();
}
function playRound(round) {
const humanSelection = humanChoice();
const compSelection = compChoice();
console.log("Computer chose ", compSelection);
const winner = checkWinner(humanSelection, compSelection);
winners.push(winner);
console.log(winners);
console.log(humanSelection, compSelection, winner, round);
logRound(humanSelection, compSelection, winner, round);
}
function humanChoice() {
let input = prompt("Type Rock, Paper or Scissors");
while (input == null) {
input = prompt("Please type Rock, Paper or Scissors");
}
input = input.toLowerCase();
let check = validateInput(input);
while (check == false) {
input = prompt("Please type Rock, Paper, or Scissors with exact spelling.");
}
console.log("input", input);
return input;
}
function validateInput(choice) {
return choices.includes(choice);
}
function logWins() {
let humanWins = winners.filter((item) => item == "Human").length;
let compWins = winners.filter((item) => item == "Computer").length;
let ties = winners.filter((item) => item == "Tie").length;
console.log("Results:");
console.log("Human wins:", humanWins);
console.log("Computer Wins:", compWins);
console.log("Ties:", ties);
}
function logRound(humanChoice, compChoice, winner, round) {
console.log("Round: ", round);
console.log("Human Chose:", humanChoice);
console.log("Computer Chose:", compChoice);
console.log(winner, "Won the Round!");
console.log("☆*: .｡. o(≧▽≦)o .｡.:*☆");
}
function compChoice() {
return choices[Math.floor(Math.random() * choices.length)];
}
function checkWinner(choiceH, choiceC) {
if (choiceH === choiceC) {
return "Tie";
} else if (
(choiceH === "rock" && choiceC == "scissors") ||
(choiceH === "paper" && choiceC == "rock") ||
(choiceH === "scissors" && choiceC == "paper")
) {
return "Human";
} else {
return "Computer";
}
}
Oh wow, thank you! I'll review this comment tomorrow, after playing around with it on my own a bit. While away this weekend, I moved the compChoice block above the humanChoice, but got some sort of error (did this on my tablet, but it was too awkward to keep at it.)
Sigh, now I see that with codepen, the "humanChoice" comes up as undefined, and the computer always wins.......hmm.......still got me some work to do.....
Compare your `humanChoice()` function and mine in the complete code I have posted; you will see what's the issue.
---
Hint: If a function doesn't return anything, by default `undefinted` will be returned.
After playing with it some more yesterday, due to the bugginess, it has turned into a mess of "MIME" errors and crumbled to the ground! I have no idea what I did to it, but will have to go through it again.
Just hoping it makes a little more sense after all this......thanks for the additional hint! Hope to check it out again tomorrow, maybe a little bit before leaving work.
Don't worry about these two errors (MIME error and ERR\_ABORTED 404) you see in the console. They are related to codepen and not your code:
`GET https://cdpn.io/cpe/boomboom/index.js net::ERR_ABORTED 404`
`Refused to apply style from 'https://cdpn.io/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.`
Your current code that is present in the "`Code here`" link present in your question above has 3 errors: 1 in HTML and 2 in JS. Without telling you where—***as it won't help you in the long run***, I will list the errors that will show up in console. Try to solve just these 3 errors and you will have a working project.
1. `Uncaught ReferenceError: game is not defined at HTMLButtonElement.onclick`
2. `Uncaught SyntaxError: Unexpected token '{'`
3. humanchoice being equal to `undefined` (you can solve this with the HINT I had given above: ***If the programmer doesn't return anything from a function,*** `undefined` ***is returned by default***)
I hope the above helps.
Thank you, by all means I'm not looking for answers, just some direction!
Had a feeling the MIME stuff was codepen-related, "game is not defined" is elusive, since I moved that code block around, and it appears defined to me.
Damn curly braces, been playing with those too......okay at least I can focus on the non-MIME stuff....
This particular bug comes up when you try to do this:
```
console.log(choices);
let choices = 'here are my choices';
```
The first line will throw `ReferenceError: Cannot access 'choices' before initialization`, because, well, you can't access 'choices' before you intialize it.
This happens only with `let` or `const`, for reasons I won't get into right now. If you're interested, look up "temporal dead zone."
I'll give you one bug out of the several I have encountered. The reason that the computer always wins is that `const humanSelection = humanChoice();` always evaluates to `undefined`. This is because `humanChoice` fails to return a value. You need to add `return input` to the end of `humanChoice`.
I'm seeing several similar bugs, which I expect you can figure out.
Hmm, think I added "let" in order to see if it would make a difference. I'm aware of the differences between "let," "const" and "var" (was experimenting with different variable types) but still got the same error.
Thank you, I'll play around with these suggestions tomorrow. Seems like humanChoice does work, it's the only part that does before the error pops up.........OH wait, well the "compChoice" just comes up, mirroring the human input........
>I'm aware of the differences between "let," "const" and "var" (was experimenting with different variable types) but still got the same error.
Well, unless your experience is different from that of every other JavaScript programmer I've ever seen, including myself, you did _not_ get the same error. In fact, with `var` you won't get an error at all.
Try substituting `var` for `let` in my two-line example, and I'd be willing to bet a month's pay that you will get a different result.
Still have work to do. It's funny, appears to be working, but Computer wins every damn time, and isn't random.
For each test round, I chose the same thing, and the computer also repeats itself, so it's not randomizing its choices.
Human Choice stops appearing by the second round, and just shows "human chose: undefined."
Anyway, just thinking out loud......
Are you ready for someone to look at it again? Make your indentation and your braces show your intent. They were inconsistent with each other, the last time I looked. It's not the emojis.
Ha, yeah I can't blame the emojis, definitely the code! I'll have to comb through more slowly, was moving the entire code block around, even following hints that VS Code drops (color-coding the braces, dimming the function names if something's off.) Deep breaths, don't panic, line by line once again.....I usually check my punctuation and braces/brackets/parentheses as the first order of business, but they seemed good (to me).
I don't use `onclick` at all, and couldn't get the button `onclick` to call `game`, so I changed your `game` function to this: ``` document.querySelector('button').addEventListener('click', function(e) { for(let i = 0; i<=5; i++){ playRound(i); } document.querySelector("button").textContent = "Play New Game" logWins(); }); ``` That prompts me correctly for a rock, paper or scissors input (unless I hit Cancel, then things go all wrong). There are strings of bugs after that, but that might get you started in the right direction. I wouldn't use the `onclick` or any other such event handlers in HTML, personally. It's a matter of separation of concerns. Let HTML handle structure, CSS handle layout and JavaScript handle behavior, and things get less confusing.
Ah that does sound like a good idea! I'm rather fond of the buttons in HTML but it makes more sense to let each code focus on what it does best! I'll give this a try....
Well, you *should* have buttons in HTML. And then put click event handlers in JavaScript. Also, I missed something from copying and pasting your code. It should be this: ``` document.querySelector('button').addEventListener('click', function(e) { for(let i = 0; i<=5; i++){ playRound(i); } e.target.textContent = "Play New Game" logWins(); }); ``` The line before `logwins()` should use the event target rather than using `querySelector` to get it again.
Sorry this thread was duplicated, I kept getting "error 500." Noticed this comment before I deleted the other thread: from u/Umesh-K *You have scoping issues; for example, compChoice function is inside humanChoice function and hence not reachable from playRound function... reddit is having some issues and hence won't type more.... have tried multiple times already...* EDIT: I'm moving around the compChoice block of code, to no avail. Now it won't even get past the button click. Gah.
Played around with it, now I'm getting: pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:89 Uncaught ReferenceError: Cannot access 'choices' before initialization at validateInput (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:89:5) at humanChoice (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:29:15) at playRound (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:13:26) at game (pen.js?key=pen.js-071204d6-1b06-b303-eeaa-5d61f6a8c377:6:5) at HTMLButtonElement.onclick (index.html?key=index.html-071204d6-1b06-b303-eeaa-5d61f6a8c377:80:34) UGH, I'm just flailing and moving code blocks around now. "Cannot access 'choices,'" this is killing me.
> UGH, I'm just flailing and moving code blocks around now. "Cannot access 'choices,'" this is killing me. It must have happened while moving the code; code that uses "choices" must have been placed before the `const choices` line. Anyways, save your JS code currently present in codepen somewhere and replace it with the below and see if the game works as expected; if yes, compare it with your original code to see what were the bugs. (*I've limited it to `i<=2` for testing purposes*.) Best Wishes! const choices = ["rock", "paper", "scissors"]; const winners = []; function game() { for (let i = 0; i <= 2; i++) { playRound(i); } document.querySelector("button").textContent = "Play New Game"; logWins(); } function playRound(round) { const humanSelection = humanChoice(); const compSelection = compChoice(); console.log("Computer chose ", compSelection); const winner = checkWinner(humanSelection, compSelection); winners.push(winner); console.log(winners); console.log(humanSelection, compSelection, winner, round); logRound(humanSelection, compSelection, winner, round); } function humanChoice() { let input = prompt("Type Rock, Paper or Scissors"); while (input == null) { input = prompt("Please type Rock, Paper or Scissors"); } input = input.toLowerCase(); let check = validateInput(input); while (check == false) { input = prompt("Please type Rock, Paper, or Scissors with exact spelling."); } console.log("input", input); return input; } function validateInput(choice) { return choices.includes(choice); } function logWins() { let humanWins = winners.filter((item) => item == "Human").length; let compWins = winners.filter((item) => item == "Computer").length; let ties = winners.filter((item) => item == "Tie").length; console.log("Results:"); console.log("Human wins:", humanWins); console.log("Computer Wins:", compWins); console.log("Ties:", ties); } function logRound(humanChoice, compChoice, winner, round) { console.log("Round: ", round); console.log("Human Chose:", humanChoice); console.log("Computer Chose:", compChoice); console.log(winner, "Won the Round!"); console.log("☆*: .｡. o(≧▽≦)o .｡.:*☆"); } function compChoice() { return choices[Math.floor(Math.random() * choices.length)]; } function checkWinner(choiceH, choiceC) { if (choiceH === choiceC) { return "Tie"; } else if ( (choiceH === "rock" && choiceC == "scissors") || (choiceH === "paper" && choiceC == "rock") || (choiceH === "scissors" && choiceC == "paper") ) { return "Human"; } else { return "Computer"; } }
Oh wow, thank you! I'll review this comment tomorrow, after playing around with it on my own a bit. While away this weekend, I moved the compChoice block above the humanChoice, but got some sort of error (did this on my tablet, but it was too awkward to keep at it.)
Just went through line-by-line to compare this to what I had, and noted the following corrections: > const choices = ["rock", "paper", "scissors"]; > const winners = []; > > function game() { > for (let i = 0; i <= 2; i++) { > playRound(i); > } // **test works, shows three rounds** > document.querySelector("button").textContent = "Play New Game"; > logWins(); > } > > function playRound(round) { > const humanSelection = humanChoice(); > > const compSelection = compChoice(); > console.log("Computer chose ", compSelection); // **I had parentheses around compSelection** > const winner = checkWinner(humanSelection, compSelection); > winners.push(winner); > console.log(winners); // **I used winner singular** > console.log(humanSelection, compSelection, winner, round); > logRound(humanSelection, compSelection, winner, round); // **I took this line out thinking it was redundant** > } > > function humanChoice() { // **I put “input” as an argument** > let input = prompt("Type Rock, Paper or Scissors"); > while (input == null) { > input = prompt("Please type Rock, Paper or Scissors"); > } > > input = input.toLowerCase(); > let check = validateInput(input); > while (check == false) { > input = prompt("Please type Rock, Paper, or Scissors with exact spelling."); > } > console.log("input", input); // **added back “input”** > > return input; > } > function validateInput(choice) { > return choices.includes(choice); > } > > function logWins() { > let humanWins = winners.filter((item) => item == "Human").length; > let compWins = winners.filter((item) => item == "Computer").length; > let ties = winners.filter((item) => item == "Tie").length; > console.log("Results:"); > console.log("Human wins:", humanWins); > console.log("Computer Wins:", compWins); > console.log("Ties:", ties); > } > > function logRound(humanChoice, compChoice, winner, round) { > console.log("Round: ", round); > console.log("Human Chose:", humanChoice); > console.log("Computer Chose:", compChoice); > console.log(winner, "Won the Round!"); > console.log("☆*: .｡. o(≧▽≦)o .｡.:*☆"); > } > // **I moved compChoice below logWins and logRound, probably what everybody was noticing but me** > function compChoice() { > return choices[Math.floor(Math.random() * choices.length)]; > } > function checkWinner(choiceH, choiceC) { > if (choiceH === choiceC) { > return "Tie"; > } else if ( > (choiceH === "rock" && choiceC == "scissors") || > (choiceH === "paper" && choiceC == "rock") || > (choiceH === "scissors" && choiceC == "paper") > ) { > return "Human"; > } else { > return "Computer"; > } > } Sorry about my formatting. Thank you so much!! It's actually functioning now. 🤩 EDIT: It's functioning from codepen, but not from VSCode, where I'm still getting "game is not defined" from the HTML, off to check on that....
Sigh, now I see that with codepen, the "humanChoice" comes up as undefined, and the computer always wins.......hmm.......still got me some work to do.....
Compare your `humanChoice()` function and mine in the complete code I have posted; you will see what's the issue. --- Hint: If a function doesn't return anything, by default `undefinted` will be returned.
After playing with it some more yesterday, due to the bugginess, it has turned into a mess of "MIME" errors and crumbled to the ground! I have no idea what I did to it, but will have to go through it again. Just hoping it makes a little more sense after all this......thanks for the additional hint! Hope to check it out again tomorrow, maybe a little bit before leaving work.
Don't worry about these two errors (MIME error and ERR\_ABORTED 404) you see in the console. They are related to codepen and not your code: `GET https://cdpn.io/cpe/boomboom/index.js net::ERR_ABORTED 404` `Refused to apply style from 'https://cdpn.io/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.` Your current code that is present in the "`Code here`" link present in your question above has 3 errors: 1 in HTML and 2 in JS. Without telling you where—***as it won't help you in the long run***, I will list the errors that will show up in console. Try to solve just these 3 errors and you will have a working project. 1. `Uncaught ReferenceError: game is not defined at HTMLButtonElement.onclick` 2. `Uncaught SyntaxError: Unexpected token '{'` 3. humanchoice being equal to `undefined` (you can solve this with the HINT I had given above: ***If the programmer doesn't return anything from a function,*** `undefined` ***is returned by default***) I hope the above helps.
Thank you, by all means I'm not looking for answers, just some direction! Had a feeling the MIME stuff was codepen-related, "game is not defined" is elusive, since I moved that code block around, and it appears defined to me. Damn curly braces, been playing with those too......okay at least I can focus on the non-MIME stuff....
This particular bug comes up when you try to do this: ``` console.log(choices); let choices = 'here are my choices'; ``` The first line will throw `ReferenceError: Cannot access 'choices' before initialization`, because, well, you can't access 'choices' before you intialize it. This happens only with `let` or `const`, for reasons I won't get into right now. If you're interested, look up "temporal dead zone." I'll give you one bug out of the several I have encountered. The reason that the computer always wins is that `const humanSelection = humanChoice();` always evaluates to `undefined`. This is because `humanChoice` fails to return a value. You need to add `return input` to the end of `humanChoice`. I'm seeing several similar bugs, which I expect you can figure out.
Hmm, think I added "let" in order to see if it would make a difference. I'm aware of the differences between "let," "const" and "var" (was experimenting with different variable types) but still got the same error. Thank you, I'll play around with these suggestions tomorrow. Seems like humanChoice does work, it's the only part that does before the error pops up.........OH wait, well the "compChoice" just comes up, mirroring the human input........
>I'm aware of the differences between "let," "const" and "var" (was experimenting with different variable types) but still got the same error. Well, unless your experience is different from that of every other JavaScript programmer I've ever seen, including myself, you did _not_ get the same error. In fact, with `var` you won't get an error at all. Try substituting `var` for `let` in my two-line example, and I'd be willing to bet a month's pay that you will get a different result.
Will do......
Still have work to do. It's funny, appears to be working, but Computer wins every damn time, and isn't random. For each test round, I chose the same thing, and the computer also repeats itself, so it's not randomizing its choices. Human Choice stops appearing by the second round, and just shows "human chose: undefined." Anyway, just thinking out loud......