Syntax error occurs due to incorrect spelling of words or the general structure of the code. Usually part or all of the code will not be executed due to a syntax error. It will be very difficult to fix the syntax error if you use the right tools when programming or understand the meaning of error messages.
Sometimes the code structure is correct, but our program does not work properly. That is, the program runs without error, but the output is not equal to the expected result! To fix logical errors, we need to check the logic of the program to understand the problem.
This type of error is not specified when compiling code. Instead, they may cause problems when running the program. As mentioned, it is easier to fix a syntax error depending on the error message that is displayed. In the following, you will learn methods that make it easier for you to study the logic of the program.
- On your Apps screen, press F12.
- In the window that opens, select the source tab.
- By clicking on the line number, the line number will be highlighted and blue. We now have a registered breakpoint.
- Multiple breakpoints can be defined for the program.
- Now refresh the page.
- You will see that the program stops running on the first specified line.
Correction of syntactic errors
A red cross indicates an error.
- An error message indicating the error: “TypeError: guessSubmit.addeventListener is not a function”
- A “Learn More” link that leads to the MDN page, which explains the meaning of the error and many details about it.
- The line number where the error is located and the character number in the line where the error was first seen. In this case it is line 86 and character number 3.
guessSubmit.addeventListener (‘click’, checkGuess);
The second round of syntactic errors
Save the page and refresh the browser and you will see that the error is gone. Now if you enter a guess and hit the “Submit guess” button, you will encounter another error.
This time the error is reported as “TypeError: lowOrHi is null” on line 78. Note that Null is a special value that means “none” or “no value”. Hence the lowOrHi variable is declared and initialized; but its value is not significant, that is, it has no type or value. Also note that this error does not appear as soon as the page loads, as this error occurs within a function, inside the checkGuess}}} block. Because the code inside the functions is executed in a separate domain from the code outside the function, this code will not be executed, and therefore no error will be issued until the checkGuess function is executed on line 86. Take a look at line 78 and see the following line of code:
lowOrHi.textContent = ‘Last guess was too high!’
lowOrHi = document.querySelector (‘lowOrHi’);
At this point we are trying to create a variable that contains a reference to an element in the HTML document. We check if the variable is still null after executing this line. Add the following code on line 49:
Note that console.log () is a really useful function for debugging that displays the value of a variable in the console. Therefore, the above command displays the value of the lowOrHi variable in the console as soon as we reach line 48 of the code. Save the file and refresh the page. You should now see the result of the console.log () command in the console.
We see that the value of lowOrHi at this stage is equal to null, so there is definitely a problem in line 48. Now we have to think about what the problem could be. Line 48 uses the document.querySelector method, which obtains a reference to an element by selecting it with the CSS selector. If we examine the file further, we can find the desired paragraph:
<p class = “lowOrHi”> </p>
Thus we need a class selector that starts with a dot (.); But this selector, which is passed to querySelector () method on line 48, has no point. This can be a problem. Line 48 lowOrHi to lowOrHi. We change. Now if we save the file and refresh the page, we will see that the <p> phrase we want returns in the browser console. This is how we corrected another error. You can now delete the console.log line or save it for future reference.
Third round of syntactic errors
Now if you run the game again, you will see more success. The game runs completely without any problems to the end and it does not matter if your guess is right or wrong. At this point, the game crashes again and the same error we initially saw occurs again:
TypeError: resetButton.addeventListener is not a function
This causes the browser to think that we want to send the content of the function as an argument into the function. So you have to be careful when using parentheses.
This error is quite simple and generally means that you have forgotten one of the parentheses in the function or condition structure. This error was caused by deleting one of the final parentheses at the end of the checkGuess function.
SyntaxError: expected expression, got ‘string’ or SyntaxError: unterminated string literal
These errors generally mean that an open or closed quote is missing in a string value. In the first error above, the string value must be replaced with the unwanted characters that the browser found instead of the quotation mark at the beginning of the string. The second error means that the string is not closed with a quotation mark. You need to think about all these errors in the way we used to deal with them in the examples. When an error occurs, look at the line number and then scroll to that line to see if you can find the problem. Keep in mind that the error is not necessarily on that line, and that the error may not have been caused by the same issue as in the previous section.