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;
}

Do x and y get the correct values?

Do x and y get the correct values?

If I go by the CSS the initial values of x and y are correct, when I click on the buttons nothing happens while it should change the position of the box.

Ah, I get it. You need to add 'px' to the values. And for block and none, put quotes around them.

Ah, I get it. You need to add 'px' to the values. And for block and none, put quotes around them.

Still no luck
here's my updated JS code:-

// JavaScript Document
var x=100,y=150;
function pos(dx,dy){
	x="(x+(10*dx))px";
	y="(y+(10*dy))px";
	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";
}
Member Avatar
diafol
x="(x+(10*dx))px";
y="(y+(10*dy))px"

try

x=(x+(10*dx)) + "px";
y=(y+(10*dy)) + "px";
x="(x+(10*dx))px";
y="(y+(10*dy))px"

try

x=(x+(10*dx)) + "px";
y=(y+(10*dy)) + "px";

This is working but the disappear and show functions aren't working.

You need quotes.

Ah okay, didn't notice that. Does chrome or firefox or something give an error?

Ah okay, didn't notice that. Does chrome or firefox or something give an error?

No errors.

Did you check with element inspector what the display value is? Did you try visibility also?

Did you check with element inspector what the display value is? Did you try visibility also?

I don't know how to use the element inspector.

Right click -> inspect element (with firebug or chrome).
Do you have it live somewhere? The main point is, do some debugging.

Right click -> inspect element (with firebug or chrome).
Do you have it live somewhere? The main point is, do some debugging.

I tried to use firebug but wasn't able, i didn't understand anything from it. Can you do it?

Okay, I tried it and it works fine for me.

Okay, I tried it and it works fine for me.

Did you make any changes to the script?

It's working with the visibility option thing not the display property.

No I didn't change anything. But nice that it works.

No I didn't change anything. But nice that it works.

i did some changes to the code :-

obj.style.display="none";

to

obj.style.visibility="hidden";

after then my code worked, wonder why it didn't work out with display property!!

Well, it works here. But I guess it doesn't matter too much.

which browser did you use?
i am using firefox5 and ie9

I tried it in chrome.