CODEWITHSUNDEEP
javascriptfunctionvariables
liminal18
liminal18

Reputation: 563

undefined variable problem involving document.keydown () function

Here's the problem, document.onkeydown = checkkeycode

I'm passing two variable to checkeycode e which is storing the event and hence keycode and the array circle which I want to update with variable c's latest position. when I pass circle to the function, it becomes undefined hence {circle[4] = c._.ty}; returns an undefined error I tried putting document.write(circle); into the document and it just wrote undefined and when I switched it with E it became a keyboard object. What I need solved is:

  1. how do I pass the array circle to the function so that when raphael translates the circle, it updates the values in circle?

  2. in the if (keycode == blah ) do I just do {c.translate(value)} {circle[4] = c._.ty} ? do I append two different function to a single if event?

<html>  

<head>  

<script language="javascript" type="text/javascript" src="/home/andrew/Documents/rahpael/raphael-min.js"></script>

</head>

<body>

<script language="javascript">

var paper = Raphael(50, 50, 420, 300);
var d = paper.rect(150, 150, 30, 30);
var c = paper.circle(50, 50, 40);
var circle = [c.attrs.cy, c.attrs.cx, c.attrs.r, c._.tx, c._.ty];
var rectie = [ d.attrs.x, d.attrs.y, d.attrs.height, d.attrs.width];

document.onkeydown = checkKeycode

function checkKeycode(e, circle) {
var keycode;
if (window.event) keycode = window.event.keyCode;  
else if (e) keycode = e.which;  
if (keycode == 40) { c.translate(0, 10)}; //{circle[4] = c._.ty};// down  
if (keycode == 39) { c.translate(10, 0)}; // right  
if (keycode == 38) { c.translate(0, -10)}; // up  
if (keycode == 37) { c.translate(-10, 0)}; // left  

}  
 // deleted some comments I've made so far.  

</script>  

</body>  
</html>

Upvotes: 2

Views: 1070

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074949

A couple of issues there:

1) Passing arguments

I'm passing two variable to checkeycode

No, you aren't. The browser will pass one argument to it, the event (unless it's IE, but you've handled that).

If you change:

document.onkeydown = checkKeycode

to

document.onkeydown = function(e) {
    checkKeycode(e, circle);
};

...you'll be passing in the circle you defined at global scope.

2) Names

Your checkkeycode function accepts the arguments e and circle, but appears to use e and c instead.

(Your checkkeycode code already closes over the circle at global scope anyway, so you could just drop the circle argument from the definition of checkkeycode and use circle rather than c. But best to keep things modular if you can, by passing the argument into the function.)

So if you're going modular and just closing over circle in the event handler:

var paper = Raphael(50, 50, 420, 300);
var d = paper.rect(150, 150, 30, 30);
var c = paper.circle(50, 50, 40);
var circle = [c.attrs.cy, c.attrs.cx, c.attrs.r, c._.tx, c._.ty];
var rectie = [ d.attrs.x, d.attrs.y, d.attrs.height, d.attrs.width];


document.onkeydown = function(e) {
    return checkKeycode(e, circle); // Event handler is closure over `circle`
};

//                       v-- `c`, not `circle`
function checkKeycode(e, c) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;  
    else if (e) keycode = e.which;  
    if (keycode == 40) { c.translate(0, 10)}; //{circle[4] = c._.ty};// down  
    if (keycode == 39) { c.translate(10, 0)}; // right  
    if (keycode == 38) { c.translate(0, -10)}; // up  
    if (keycode == 37) { c.translate(-10, 0)}; // left  

}

Upvotes: 4

Related Questions