image onclick instead of button on click?

Question

I have a script that gets executed by an onclick, but it doesn't work when I use a image, only a button works. You can see the example at http://thomaswd.com/maze. Click on the "left" button then the down button, and they both work. But the right arrow doesn't work, for some reason. Please help. Thanks!

Right button works but it's throwing JS error, `Uncaught TypeError: undefined is not a function` — Muthu Kumaran, Feb 14 '13 at 03:21
yea...I dont know how to fix it, I am an intermediate javascript coder — Thomas Lai, Feb 14 '13 at 03:23
TypeError: right is not a function [Break On This Error] right() — Shridhar, Feb 14 '13 at 03:24
Strange, I don't understand why `right()` is not working but works if I rename the function to different name. Demo: http://jsfiddle.net/5b3Ez/ — Muthu Kumaran, Feb 14 '13 at 03:30

score 2 · Answer 1 · answered Feb 14 '13 at 03:32

2

Strange, I don't understand why right() is not working but works if I rename the function to different name.

Demo: http://jsfiddle.net/5b3Ez/

Rename right() function to a different name and Hope that helps for now.

answered Feb 14 '13 at 03:32

Muthu Kumaran

17,682
5
47
70

score 2 · Accepted Answer · edited May 23 '17 at 12:15

Change the id from 'right' to something else. I am not entirely sure why this fails, but apparently within the html, since 'right' is the id, it hides the right() function.

In Chrome debugger, I changed the id to 'r' and the button works, although it is huge because of the css not matching anymore :)

As others noted, the 'up' and 'down' buttons work, and this is because their ids are 'top' and 'bottom'.

EDIT:

And here is an explanation, very strange issue :)

score 1 · Answer 3 · answered Feb 14 '13 at 03:23

1

I'm a bit confused as to why right doesn't work when up does under the same circumstance, but it seems that you can get it to work by binding via JavaScript (which you should really do anyway) instead of using onclick.

$("#right").on('click', right);

answered Feb 14 '13 at 03:23

Explosion Pills

188,624
52
326
405

@user2034878 try wrapping that in `$(document).ready(function () {` – Explosion Pills Feb 14 '13 at 03:31

score 0 · Answer 4 · answered Feb 14 '13 at 03:58

Instead of right(), just use window.right().

In that context, I tried:

console.log(this.right===right, this.right===window.right, right===window.right);

and it displays true false false, but in case of other arrows, it is false false true. The explanation pointed to by Paul Hoenecke points towards the problem.

image onclick instead of button on click?

4 Answers4