I am learning Javascript, I wrote this JS code and it isn't working as it should be, it is meant to reposition the element square. Here's the code :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="test.js">
</script>
<style>
#square{
position:absolute;
border-color:#009;
border-width:3px;
border-style:solid;
width:200px;
height:200px;
left:100px;
top:150px;
padding:8px;
}
</style>
</head>
<body>
<form name="form1">
<input type="button" value="Make it left" onclick="pos(-1,0);" />
<input type="button" value="Make it right" onclick="pos(1,0);" />
<input type="button" value="Make it top" onclick="pos(0,-1);" />
<input type="button" value="Make it bottom" onclick="pos(0,1);" />
<input type="button" value="Make it disappear" onclick="disappear();" />
<input type="button" value="Show the box" onclick="show()" />
<hr />
</form>
<div id="square">
<p>This is a square which is meant to be positioned, make it invisible and show again</p>
</div>
</body>
</html>Javascript file:
// JavaScript Document
var x=100,y=150;
function pos(dx,dy){
x=x+(10*dx);
y=x+(10*dy);
obj=document.getElementById("square");
obj.style.top=y;
obj.style.left=x;
}
function disappear()
{
obj=document.getElementById("square");
obj.style.display=none;
}
function show(){
obj=document.getElementById("square");
obj.style.display=block;
}