What went wrong troubleshooting javascript?
When
you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some tips on how to find and fix errors in JavaScript programs. Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across: Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above
classifications will do at this early stage in your career. We'll look at both of these types going forward. To get started, let's return to our number guessing game — except this time we'll
be exploring a version that has some deliberate errors introduced. Go to GitHub and make yourself a local copy of number-game-errors.html (see it running live here). Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your
example. At this point, let's consult the developer console to see if it reports any syntax errors, then try to fix them. You'll learn how below. Earlier on in the course we got you to
type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go
hunting. addEventListener() .addeventListener to addEventListener should fix this. Do this now.Syntax errors round two
Syntax errors round three
A logic errorAt this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out! There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.
Working through the logicTo fix this, let's consider how this line is working. First, we invoke
Next, we pass the result of invoking
Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1. We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:
Hence us wanting to add 1, to give us a random number between 1 and 100:
Try updating both lines like this, then save and refresh — the game should now play like we are intending it to! Other common errorsThere are other common errors you'll come across in your code. This section highlights most of them. SyntaxError: missing ; before statementThis error generally means that you have missed a semicolon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the
to
It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator ( The program always says you've won, regardless of the guess you enterThis could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside
to
the test would always return SyntaxError: missing ) after argument listThis one is pretty simple — it generally means that you've missed the closing parenthesis at the end of a function/method call. SyntaxError: missing : after property idThis error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing to This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses! SyntaxError: missing } after function bodyThis is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literalThese errors generally mean that you've left off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark. For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above! SummarySo there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right, especially in the earlier stages of your learning journey. See also
In this moduleHow do I troubleshoot JavaScript errors?Fix JavaScript errors. Open the demo webpage JavaScript error reported in the Console tool in a new window or tab.. Right-click anywhere in the webpage and then select Inspect. Or, press F12 . ... . Click the Open Console to view errors button on the top right. ... . Click the error.. What causes a JavaScript error?Syntax-based
Grammatical mistakes, such as missing parentheses or unmatched brackets, are the major causes of syntax errors in JavaScript. For example, when you must use conditional statements to address multiple conditions, you may miss providing the parentheses as required, leading to syntax flaws.
What are the problems with JavaScript?These days, most cross-browser JavaScript problems are seen: When poor-quality browser-sniffing code, feature-detection code, and vendor prefix usage block browsers from running code they could otherwise use just fine. When developers make use of new/nascent JavaScript features, modern Web APIs, etc.)
What is the most common error in JavaScript?TypeError is one of the most common errors in JavaScript apps. This error is created when some value doesn't turn out to be of a particular expected type. Some of the common cases when it occurs are: Invoking objects that are not methods.
|