Home/ Questions/Q 3624332
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T23:29:40+00:00

Here’s the problem, document.onkeydown = checkkeycode I’m passing two variable to checkeycode e which

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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  

}
    • 0