A question from a Rookie to all the JavaScript Marvels out there

Glen McLean — Fri, 04 Aug 2017 15:48:05 +0000

So here are the basics. The following bit of code refers to a reaction game where the user clicks on a randomly appearing object as they show up in the browser it then out puts the time it took them to click on it.

function appearAfterDelay() {
        setTimeout(makeShapeAppear, Math.random() * 2000);

    }

    appearAfterDelay();

        document.getElementById("shape").onclick = function() {
            document.getElementById("shape").style.display = "none";

            var end = new Date().getTime();

            var timeTaken = (end - start) /1000;

            document.getElementById("timeTaken").innerHTML = timeTaken + "s";

            appearAfterDelay();
    }

(and if any of you know of shorter or cleaner way to write code that you see me posting here or in future posts please let me know, since I am new I'd like to know if what I'm doing is clean and readable or not, and if there is a faster way to do it, then I'm all for it)

Back to the Main topic though.
I've been looking around to find code that will allow me to capture their fastest time (in a time limit of, lets say 2 minutes for the user to try their luck) and then store it in a side bar as a record allowing them to enter in their name along side, once the timer ends, and also (lets say it holds the top ten records) to compare it to those ten and if it beats one or more of them to then position it correctly and get rid of the record that would then move to the eleventh spot.

So if you have ideas on this or know of a place where I can read up about this please let me know or am I just trying to do something that isn't possible? Because in the the places I know to look I haven't come across anything that I can see that would help (although that's probably because I just don't know what exactly one would call such pieces of code any way)

Any hints,tips and ideas would be much appreciated. Thanks.

The Rookies Error(s) in .js

Glen McLean — Thu, 03 Aug 2017 21:51:34 +0000

I'm still very fresh when it comes to the coding scene but tonight was one of the funniest yet very much a large learning curve for me and what I can say to all the beginners out there like me, always ask for help at every turn that has you wondering "what did I do wrong? why wont this work?" because tonight was a good example of this. so here is some of the code I was working on for a little game of reaction testing using a touch of HTML and CSS but mainly in the JavaScript side in getting my brain to work on arrays (which would give out a random sized circle or square with a random colour) and then giving out the correct "answers" at the end. (The answers being the time it took you to click on the object after it appeared in the browser)


function appearAfterdelay() {
        setTimeout(makeShapeAppear, Math.random() * 2000);

    }

    appearAfterDelay();

        document.getElementById("shape").onclick = function() {
            document.getElementById("shape").style.display = "none";

            var end = new Date().getTime();

            var timeTaken = (end - start) /1000;

            document.getElementById(timeTaken).innerHTML = timeTaken + "s";

            appearAfterDelay();
    }

So some of you will allready see the mistake(s) there, as for me, I pondered over the console log giving me the first error and then back at the code, I must have spent about an hour or two going back and forth trying to figure out what I had done wrong.

The first error stated this:

Uncaught ReferenceError: appearAfterDelay is not defined
at javascript.js:59

which was referring to this line:


 appearAfterDelay();

so I went through all the script again and eventually asked a friend to help, needless to say he almost killed himself laughing, and so did I, when he showed me this simple little spelling mistake on this piece a few lines above it


function appearAfterdelay() {
        setTimeout(makeShapeAppear, Math.random() * 2000);

which was the "d" (in appearAfterdelay) should have been in caps.
so after fixing that I thought "yay finally now it'll work" well it was short lived as now I got an error saying:

Uncaught TypeError: Cannot set property 'innerHTML' of null
at HTMLDivElement.document.getElementById.onclick (javascript.js:68)

Referring to this line:


    document.getElementById(timeTaken).innerHTML = timeTaken + "s";

after some more reading through and berating myself for not being able to see the problem and after a cup of coffee I called my friend back to help, and yet again he killed himself laughing, all I had left out was the two tiny "" on either side of timeTaken.

So lesson learnt as I'm not realy used to asking for much help, I will hopefully do so a lot more now, and for those of you also just starting out I suggest you do the same, instead of copying me and spending a good few hours wondering what's wrong when your able to relax while watching the end result working the way it should be with a cup of coffee in the hand.

DEV Community: Glen McLean

A question from a Rookie to all the JavaScript Marvels out there

The Rookies Error(s) in .js