Unexpected Token } Javascript

Question

I'm having some trouble passing multiple parameters to a Javascript function.

The function:

function selectDino(dinosaurName, dinosaurHealth, dinosaurTraits)
{
    localStorage.setItem("dinoName", dinosaurName);
    localStorage.setItem("dinoHealth", dinosaurHealth);
    localStorage.setItem("dinoTraits", dinosaurTraits);
    location.replace("nextpage.html");
}

....

The call (mainly the "selectDino()" bits):

<img class="leftDino" src="dino1.png" onmouseover = getDino("dinoOne") onclick=selectDino("dinoOne", "20", "Banterous")>
<img class="centerDino" src="dino2.png" onmouseover = getDino("dinoTwo") onclick=selectDino("dinoTwo", "18", "Spiky")>
<img class="rightDino" src="dino3.png" onmouseover = getDino("dinoThree") onclick=selectDino("dinoThree", "22", "Bitey")>

Whenever I look on the Chrome Developer Console, it tells me the following:

Uncaught SyntaxError: Unexpected token }

Can anyone help with this?

EDIT

Added single quotes around the attributes and that's fixed the problem.

You should wrap your attributes inside quotes: `onmouseover="getDino('dinoOne')" onclick="selectDino('dinoOne', '20', 'Banterous')"` — Magicprog.fr, Jul 02 '15 at 14:18
@Magicprog.fr the otherway around is nicer (and is valid html): `onmouseover = "getDino('dinoOne')" ` — ben, Jul 02 '15 at 14:20
On the right side of the error log, should be the line number. — mguimard, Jul 02 '15 at 14:21
copy pasted code? This might be an encoding issue. Try to rewrite it — Deblaton Jean-Philippe, Jul 02 '15 at 14:21
Copy/pasted the code you gave into the console. It runs fine. Your error is somewhere else in your javascript. No in the part you shared — ben, Jul 02 '15 at 14:22
It's most likely a syntax error. Testing your code in JSLint (http://jslint.com/) will probably tells you where it fails — ben, Jul 02 '15 at 14:24
I think we are supposed to close this as typo thing but yea I get it, its 2015 and SO is changing — Mr. Alien, Jul 02 '15 at 14:44

score 8 · Accepted Answer · answered Jul 02 '15 at 14:19

8

onclick and onmouseover functions needs " " like that onclick="foo();"

<img class="rightDino" src="dino3.png" onmouseover="getDino('dinoThree')" onclick="selectDino('dinoThree', '22', 'Bitey')">

answered Jul 02 '15 at 14:19

Özgür Ersil

6,909
3
19
29

I've added quotes, and still get the same error. – String Jul 02 '15 at 14:20
3

Did you put the single quotes inside? – epascarello Jul 02 '15 at 14:21
@epascarello No, I'll try that. – String Jul 02 '15 at 14:23
Yea, you can't nest the same type of quotes (`onmouseover="getDino("dinoOne")"` won't work.) – Cerbrus Jul 02 '15 at 14:24
@epascarello That's worked! If only you could accept comments as answers. – String Jul 02 '15 at 14:24
@DeblatonJean-Philippe: the OP seems to disagree. – Cerbrus Jul 02 '15 at 14:27

Cerbrus · Answer 2 · 2015-07-02T14:27:20.053

3

Wrap your HTML attributes in quotes, and close your HTML elements (/>):

<img class="leftDino" src="dino1.png" onmouseover="getDino('dinoOne')" onclick="selectDino('dinoOne', '20', 'Banterous')" />
<img class="centerDino" src="dino2.png" onmouseover="getDino('dinoTwo')" onclick="selectDino('dinoTwo', '18', 'Spiky')" />
<img class="rightDino" src="dino3.png" onmouseover="getDino('dinoThree')" onclick="selectDino('dinoThree', '22', 'Bitey')" />

Keep in mind I also changed the inner quotes to single quotes ('), otherwise, you'd break your HTML entirely.

edited Jul 02 '15 at 14:27

answered Jul 02 '15 at 14:20

Cerbrus

70,800
18
132
147

In HTML5, self-closing elements : `area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr` don't need `/` at the end – Magicprog.fr Jul 02 '15 at 14:25
2

@Magicprog.fr: Sure, but it's [still a good idea](http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5) to close your tags. – Cerbrus Jul 02 '15 at 14:26

Unexpected Token } Javascript

2 Answers2