javascript - Html and java script that moves object with arrow keys? - Stack Overflow

admin管理员组

文章数量:1410705

Ok so I made a page that can move an image with the arrow keys but only the down and right functions work. I made the functions from a hide show script because i'm very new to javascript.

Here is the code.

left

function left(id) { 
    var y = '5';
    var z =document.getElementById(id).style.left;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.left;
        if (state == '1') {
            document.getElementById(id).style.left = x;
        } else {
            document.getElementById(id).style.left = x;
        }
    }

right

function right(id) { 
    var y = '5';
    var z =document.getElementById(id).style.right;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.right;
        if (state == '1') {
            document.getElementById(id).style.right = x;
        } else {
            document.getElementById(id).style.right = x;
        }
    }

up

function up(id) { 
    var y = '5';
    var z =document.getElementById(id).style.bottom;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.bottom;
        if (state == '1') {
            document.getElementById(id).style.bottom = x;
        } else {
            document.getElementById(id).style.bottom = x;
        }
    }

down

function down(id) { 
    var y = '5';
    var z =document.getElementById(id).style.top;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.top;
        if (state == '1') {
            document.getElementById(id).style.top = x;
        } else {
            document.getElementById(id).style.top = x;
        }
    }

then the arrow key script

document.onkeyup = KeyCheck;       
function KeyCheck() {

 var KeyID = event.keyCode;

  switch(KeyID)
  {

  case 37:

  right('img');

  break;

  case 38:

  up('img')

  break

  case 39:

  left('img');

  break;

  case 40:

  down('img');

  break;
  }
  }

and then the html

<img id="img" src=".png" style="position:absolute; left:1; bottom:1; right:1; top:1;">

you can download the html at arrow.zip

the actual page is here

Ok so I made a page that can move an image with the arrow keys but only the down and right functions work. I made the functions from a hide show script because i'm very new to javascript.

Here is the code.

left

function left(id) { 
    var y = '5';
    var z =document.getElementById(id).style.left;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.left;
        if (state == '1') {
            document.getElementById(id).style.left = x;
        } else {
            document.getElementById(id).style.left = x;
        }
    }

right

function right(id) { 
    var y = '5';
    var z =document.getElementById(id).style.right;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.right;
        if (state == '1') {
            document.getElementById(id).style.right = x;
        } else {
            document.getElementById(id).style.right = x;
        }
    }

up

function up(id) { 
    var y = '5';
    var z =document.getElementById(id).style.bottom;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.bottom;
        if (state == '1') {
            document.getElementById(id).style.bottom = x;
        } else {
            document.getElementById(id).style.bottom = x;
        }
    }

down

function down(id) { 
    var y = '5';
    var z =document.getElementById(id).style.top;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.top;
        if (state == '1') {
            document.getElementById(id).style.top = x;
        } else {
            document.getElementById(id).style.top = x;
        }
    }

then the arrow key script

document.onkeyup = KeyCheck;       
function KeyCheck() {

 var KeyID = event.keyCode;

  switch(KeyID)
  {

  case 37:

  right('img');

  break;

  case 38:

  up('img')

  break

  case 39:

  left('img');

  break;

  case 40:

  down('img');

  break;
  }
  }

and then the html

<img id="img" src="http://trevorrudolph./logo.png" style="position:absolute; left:1; bottom:1; right:1; top:1;">

you can download the html at arrow.zip

the actual page is here

• javascript
• html
• arrow-keys

Share Follow asked Mar 9, 2011 at 22:49 Trevor RudolphTrevor Rudolph 1,06344 gold badges1818 silver badges4242 bronze badges 2

• Have you tried debugging your javascript with Visual Studio or your browsers developer tools? It's best to step through and make sure the values of your variables are as you expect at each step. Otherwise I don't really understand your logic that well. As a side note you don't need to set Y to '5' then parseInt you can just set it to the number 5 and it is an int. You are missing semicolons on your break statements but that might just be when you typed it in here. Also I remend running your javascript through jslint. to make sure you haven't made any other mistakes. – James Hulse Commented Mar 9, 2011 at 22:58
• You should really start using e.g. jQuery ;o - that will make your code much more readable and shorter. – ThiefMaster Commented Mar 9, 2011 at 23:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You should only be positioning it with top and left, because if you try to do it the way you're doing it, you are going to end up with very messed up properties, such as a top of say 5 but a bottom of say 100.

Also, you should use a unit, preferable pixels, for the top and left properties.

So, all you really need to do is change your functions to look like:

function left(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1; // get just the number and not the units
    document.getElementById(id).style.left = current - 1 + 'px'; // taking advantage of JavaScript's strange but sometimes useful type conversion. The subtraction converts it to an int and the addition converts it back to a string. 
}

function right(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.left = parseInt(current) + 1 + 'px'; // here we can't use that trick
}

function up(id) {
    document.getElementById(id).style.top.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.top = current - 1 + 'px';
}

function down(id) {
    document.getElementById(id).style.top.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.top = parseInt(current) + 1 + 'px';
}

Also, you should be using <script type="text/javascript"> instead of <script language="JavaScript">. The latter form is deprecated.

function move ( id, direction ) {
    var element = document.getElementById(id);
    switch ( direction )
    {
    case "left":  element.style.left += 5; break;
    case "right": element.style.left -= 5; break;
    case "up":    element.style.top += 5;  break;
    case "down":  element.style.top -= 5;  break;
   }
}

Consider your code, look something like this. Less code, less getelementbyid, easy to change. You need only left and top style.

Edit: my mistake - string values must be inside "". Numeric values - don`t need.

Instead of setting the .right property, subtract an amount from the .left property. This works for me. Additionally, try optimizing your code - your if clause does exactly the same thing in the if part and in the else part...

本文标签： javascriptHtml and java script that moves object with arrow keysStack Overflow