JavaScript JavaScript and the DOM Getting a Handle on the DOM A Simple Example

arik
arik
5,790 Points

Uncaught SyntaxError : Unexpected Token <

I used bracket text editor to write my code, and when I checked it using chrome dev tool it showed the message Uncaught SyntaxError : Unexpected Token <, which lead to the first line <! DOCTYPE html> What's the meaning of that? Is there anyone could give a hand to clarify? And This is the code I've written:

<!DOCTYPE html> <html> <head> <title>JavaScript and the DOM</title>

</head> <body> <h1 id="myHeading">JavaScript and the DOM</h1> <p>Making a web page interactive</p> <script type = "text/javascript"> const myHeading = document.getElementById( " myHeading" ); myHeading.addEventListener( "click", () => { myHeading.style.color = "red"; }); </script> </body> </html>

Thank you very much in advance.

3 Answers

Huy Bui
Huy Bui
13,329 Points

Hey Arik,

Looks like you have an extra space in your query for 'myHeading' -- document.getElementById( " myHeading" ).

// remove extra space
const myHeading = document.getElementById( "myHeading" ); 

Hope this helps

arik
arik
5,790 Points

Hey Hui Bui, Thank you very much for your help:) I am really a novice at programming, and never used jsfiddle before. I'll learn how to use that. Thank you for introducing me to jsfiddle:)

Huy Bui
Huy Bui
13,329 Points

No problem! glad I could help.

arik
arik
5,790 Points

I've removed the white space, but the console still send the same error message. What I don't understand is, why I can still launch it using bracket's live preview, but when I tried to use console it sent the error message...What could be wrong?

Huy Bui
Huy Bui
13,329 Points

Hey Arik,

Here's a working jsfiddle example of the code you provided and extra space removed. You can do a code compare to the working example and see what else may be causing the error.