Moving Image Element to a position with only Javascript - Here's my code.

Question

Moving Image Element to a position with only Javascript - Here's my code.

568 views Asked by Blockeus At 24 November 2024 at 12:07

-- CSS

#Char { 
position:absolute; 
top: 500px; 
left: 500px; 
height: 80px; 
width: 80px;
}

-- HTML

<!DOCTYPE html> 
<html> 
<head>
<link rel="stylesheet" type="text/css" href="TopDown.css">
</head>
<body> 
<img id = "Char" src = "GunMan.jpg">
<script>
var Char = document.getElementById('Char');
document.addEventListener("onkeydown",UpMove(Eve)); 
UpMove(Eve) { 
if (Eve.keyCode == 38) { 
Char.style.top = "300px";
}
</script> 
</body> 
</html>

Moving Image Element to a position with only Javascript - Here's my code. I can't move the image for some reason to 300px. also tell me if theirs any bad habits placed within this code...

Original Q&A

There are 3 answers

**Leo Bauza** · Answer 1 · 2015-06-10 12:31:06

You are missing the closing curly bracket for your UpMove function causing a javascript error.

Uncaught SyntaxError: Unexpected token {

You are also missing the keyword "function" for your UpMove function.

The event is "keydown" not "onkeydown"

I've edited this a couple of times, so rather than keep doing that here is a fiddle that works:

https://jsfiddle.net/ys5wcp9c/3/

**Özgür Ersil** · Answer 2 · 2015-06-10 12:33:11

Özgür Ersil On 10 June 2015 at 12:33

try like that

var Char = document.getElementById('Char');

document.onkeydown = UpMove;

function UpMove(Eve) { 
    if (Eve.keyCode == 38) {   
        Char.style.top = "300px";
    }
}

**Krystian Jankowski** · Answer 3 · 2015-06-10 12:38:31

There was few issues with your code. You should use "keydown" instead of "onkeydown".

Try this script

var Char = document.getElementById('Char');
document.addEventListener ("keydown",UpMove); 

function UpMove(e) { 
  console.log(e)
  if (e.keyCode == 38) { 
    Char.style.top = "300px";
  }
}

TechQA.

Moving Image Element to a position with only Javascript - Here's my code.

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in KEYPRESS

Popular Questions

Popular Tags

Trending Questions