Now let's start with errors which you can typically avoid, for example simple syntax errors.
Let's say you simply forgot to close your array here.
Now right away, the IDE yells at us basically,
you see we got the red squiggly line here,
I got a red mark here on the right in the scroll bar and the file itself also turned red
here on the left in the explorer, it's now red
and this indicates that there is something wrong which the IDE detected right away.
You can then always hover over the red squiggly lines to get a description of the problem and here, you
see expression or comma expected. Now to be honest,
that's not the best error message because it doesn't really describe the problem here, that a closing
square bracket is missing.
Nonetheless, you quickly see that something is wrong here and trivial errors like this of course can
be easily fixed because you should quickly see that
yes we got a missing square bracket here.
Now that might sound dumb but it's easy to mistype or to accidentally delete something and therefore
having a look at what your IDE tells you is really a great idea and it's something you should do.
Now sometimes you also got errors which don't really show up here in the IDE,
for example if I tried to call parse here, like this.
This is not a built-in function actually
and the IDE knows that it's not built into Javascript but maybe it's a function defined by us,
maybe in another file, therefore
the IDE here doesn't yell at me because it doesn't know whether I might have defined a function called
pass in another file, for example here
I'm also calling output result which is not defined in this file and which also is not a default Javascript
function but since I have it defined in vendor.js, this will work.
So it would be bad if the IDE would complain about this line and
it's the same here now.
Now of course this is not built-in though
but maybe I mistyped and therefore use this or I had a function named parse, in the past I deleted it
and forgot to update this code.
So this is code which works in the IDE but it will not work here.
If I reload this page and I try to add, you see no matter how hard I press my buttons, nothing happens
here. In such a case, it's always a great idea to open the developer tools
and my recommendation would be that you do this in incognito mode so that no browser extensions you
might have installed can interfere here because they might also change something on the page or run
some scripts which might show up in your developer tools even though they're not directly related to
your code. So open the developer tools, here under view, developer, developer tools or with the shortcut
you see there and there, you should always go to the console first because it's here where you'll find
potential error messages and indeed here you see I got error messages regarding parse not being defined,
now that's the part I meant with reading the error messages. I could now go into panic mode because there's
so much red here
but if we just have a look at the error message, it's pretty clear what the problem is.
Parse is not defined,
okay,
and we even see where this was called, it was called in the get user number input function which we find
in app.js
and there, this is the line number, line number 7,
the error also is stemming from line number 7
and then if that is not helpful to us, we see that it was called in get user number input, which in turn
happened because this add event here on our button basically trigger and that was set up in line number
33.
Now we can even click here and we're taken right to the source code, here in the developer tools.
So here under the sources tab, we now see the problematic source code
and since this is the code as it was executed by the browser, so at runtime, the browser knows that indeed
here parse is not defined. The IDE
can't know that because it doesn't know which scripts we might be loading, potentially from other servers and
so on
but the browser totally knows what's available at this point of time and it knows there is no built-in
parse function
and there also is no code written by me or by some other third-party which I added that would add a
parse function.
Therefore the browser knows parse does not exist
and now we can have a look at our code and analyze what went wrong here.
Did we expect to write a parse function on our own?
Well maybe we should do so now, maybe we have a parse function but it's called parse input and we therefore
need to rename it or as is the case here,
we're looking for the parseInt function.
So this is how we can narrow down the issue and fix it with the help of the error message we're getting.