javascript - Make image randomly move onclick

I am attempting to make a image move randomly using plain javascript. Upon the event onclick the image location should move according to the random number that is generated.

Here is my code:

<html>
<head><title> Move Image </title>

<style type="text/css">
#smiley { position: relative; top: 0px; left: 0px; }
</style>

<script type="text/javascript">

function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);


var obj = document.getElementById("emotion");

obj.style.top = x + "px";
obj.style.left = y + "px";


 obj.onclick= "changeImg();"
 }

</script>
</head>
<body>
<img id="emotion" 
src=".png" 
width="42" height="42">
</body>
</html>

Any idea? Thank you!

I am attempting to make a image move randomly using plain javascript. Upon the event onclick the image location should move according to the random number that is generated.

Here is my code:

<html>
<head><title> Move Image </title>

<style type="text/css">
#smiley { position: relative; top: 0px; left: 0px; }
</style>

<script type="text/javascript">

function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);


var obj = document.getElementById("emotion");

obj.style.top = x + "px";
obj.style.left = y + "px";


 obj.onclick= "changeImg();"
 }

</script>
</head>
<body>
<img id="emotion" 
src="http://www.google./images/srpr/logo4w.png" 
width="42" height="42">
</body>
</html>

Any idea? Thank you!

Share Improve this question asked Mar 19, 2013 at 21:36 user2138152 1313 silver badges10 bronze badges

All the part with obj init should not be in the changeImg body function, and it should be obj.onclick=changeImg; – darma Commented Mar 19, 2013 at 21:39

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

This one works without inline script in all browsers

Codepen demo

var object = document.getElementById('item');

object.onclick=function(){
    var x = Math.floor(Math.random()*300);
    var y = Math.floor(Math.random()*300);
    object.style.top = x + 'px';
    object.style.left = y + 'px';
};

HTML

<img id="item" src="http://...png" />

CSS

#item { 
  cursor: pointer;
  position: absolute; 
  top: 0px; 
  left: 0px; 
  transition: all 1s;
}

You're never assigning changeImg() to the <img>
```
<img ... onclick="changeImg()">
```
The element must be position: absolute if you plan on using top and left.
The <img> tag has the ID of emotion, not smiley.
You don't need to set the <img>'s onclick property each time the changeImg() function is called. Once is enough.

You never set the position of the image object. Instead, you set "smiley" to relative, but the image is "emotion".

Try

#emotion{ position: relative; top: 0px; left: 0px; }

I would suggest you to call the function rather than the string literal. example:

obj.onclick = changeImg;

<html>
<head><title> Move Image </title>

<style type="text/css">
#emotion { position: absolute; top: 0px; left: 0px; border:1px solid red;}
</style>

<script type="text/javascript">

function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);


var obj = document.getElementById("emotion");

obj.style.top = x + "px";
obj.style.left = y + "px";


 }

</script>
</head>
<body>
<img id="emotion" 
src="http://www.google./images/srpr/logo4w.png" 
width="150" height="42" onclick="changeImg()"/>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Make image randomly move onclick - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)