Image is not getting displaced in the browser
I was doing an exercise on positioning the image, from a book开发者_开发技巧. It says, using DOM, i.e. position, top and left value of the image we can move the image along the browser window using JavaScript.
The thing is i have the image getting displayed but when i enter the coordinates it doesn't get displaced to its new value. Please if someone could tell me where i am going wrong ??
here is the HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="newjavascript.js">
</script>
</head>
<body>
<form action="">
<p>
Xcordinate : <input type="text" id="xCod" /><br/>
Ycordinate : <input type="text" id="yCOd" /><br/>
</p>
<br/>
<input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
document.getElementById('yCod').value )" />
</form>
<div id="image" style="position: absolute; left:0; top:200px" >
<img src="testing.jpg" alt="Picture Cannot be displayed" />
</div>
</body>
</html>
and the JavaScript file
function moveIt (movee, newTop, newLeft){
dom = document.getElementById(movee).style;
dom.top=newTop+"px";
dom.left=newLeft+"px";
}
I have default browser for Google Chrome
Because it's a type="submit" button, it is posting back and you're seeing the same page over again, you need to return false; to prevent the submit, like this:
<input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
document.getElementById('yCod').value); return false;" />
Also noticed in setting up the demo that your element IDs are off, this:
Ycordinate : <input type="text" id="yCOd" /><br/>
Should be:
Ycordinate : <input type="text" id="yCod" /><br/>
You can test it out (with both of the above fixes) here.
You have a capitalization issue (or a typo in your post). You have an element in your page with an id of yCOd, but your code is looking for an ID of yCod
加载中,请稍侯......
精彩评论