JavaScript rock-paper-scissors Project issues with first load of the page

When you open the page for the first time, you are presented with a prompt box like intented. But you want to open dev tools/console to watch the console.log messages appear.

For some reason they dont appear the first time and you have to play the game till the end.

Here is the link to the page : https://kloba1004.github.io/project-rock-paper-scissors/

Can anyone give his honest opinion on my code? Here is the link: https://github.com/kloba1004/project-rock-paper-scissors

Thanks in advance!

EDIT: I have managed to solve the problem partially by adding html base and button tag with JavaScript event which prevents the code from executing before clicking the button. Still, if I close the dev tools and click the button, issue appears again.

After hours of googling through stack overflow it seems like I should add some kind of JavaScript code which should detect if console is open before running the rest of the code. But that seems way too out of my league at the moment.

Hi, a litle comentary on.

let computerPlay= Math.random()*10;

if you have 3 options to chose in a random the number to multiply is more naturaly to be 3, So you have 0 to 1 for rock, 1 to 2 for paper… etc. This comentary is becasue 0 to 3.5, 3.6 to 6.5 and 6.5 to 10 doesnt have the same proportions.

A litle advice is to mantain your html code separated from css code and javascript code. Here is the template i use to start a project

 <!DOCTYPE html>
      <html>
           <head>
                <link rel="stylesheet" type="text/css" href="./styles.css">
                <title>template</title>
           </head>

           <body>

           </body>
           <script type="text/javascript" src="example.js"></script>

   </html> 

In this way you put all you javascript code in another file (in this case example.js), and the css code in another separated (in this case styles.css). Both files without html tags.

Note that the example.js goes in the same folder as index.html. If you want it in a subfolder (scripts for example) you mus use src=“scripts/example.js”

This is because when your code gets bigger its very hard find errors with the three types of codes in a big file.

Hope this will help.

Also no idea what happening to the console. If another one knows please share.

1 Like

Thank you for the advice.

I understand your point regarding the proportions of the ranges, but I guess that is not that big of a deal right now, right? :smiley: EDIT: I corrected the proportions.

Actually, I do use separate html+css files and will use separate javascript file, but this file was meant to be script tags only, and in the process of updating it to add an html button I forgot to split the code in the appropriate files.

Regarding the console, seems like prompt might be blocking console.logs, but definitely not sure why. Again, out of my leage.

1 Like

Yeah its because is the only thing i found supicious. But is not important :grinning:

1 Like

Feeling good that code is valid.

But at the same time frustrated, it is 2a.m. over here and still haven’t showered which I was going to do 3.5 hours ago, but console issue made me hardstuck in front of the pc. :smiley:

I won’t be able to sleep properly, you can bet. Coming from a mechanical engineering background, this kind of stuff drives me crazy, used to sit in front of a problem trying to solve it for 16 hours straight. Hopefully someone will come up with an answer.

Yeah im the same type.

I searched a bit and everyone says we have to avoid using prompt and alert because are functions that blocks everything in the tab (including the console) until you click in it, also it mess with the load of the page in the browser. I didnt found (yet) official documentation to check this point.

Dont worry in the next projects you learn how to avoid using alert and prompt.

1 Like

@fernandopaz1 That is exactly the same thing I read everywhere.

I have officially moved on and posted the solution where required to. Thank you for your time and good advice.