0

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;
}
3
Contributors
22
Replies
23
Views
6 Years
Discussion Span
Last Post by twiss
0

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.

0

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

0

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";
}
0
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.

0

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

No errors.

0

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

0

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.

0

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

0

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?

0

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

Did you make any changes to the script?

0

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!!

0

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

Edited by dhruv_arora: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.