DEV Community

Glen McLean
Glen McLean

Posted on

The Rookies Error(s) in .js

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

which was referring to this line:


 appearAfterDelay();

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Referring to this line:


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

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)