www.webdeveloper.com
Results 1 to 4 of 4

Thread: buttons working just once

  1. #1
    Join Date
    May 2013
    Posts
    55

    buttons working just once

    Hello,

    I have just started learning js, and got stuck somewhere. I have created 4 buttons that can move the text below it left, right, up and down respectively.
    But I am facing a problem, two buttons are just working once i.e left and up; and two buttons are not working at all i.e right and down. Here's my code:
    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>
    function moveTextLeft(side)
    {
    	var text = document.getElementById("moveable");
    	switch(side)
    	{
    	case "left":
    	text.style.marginLeft = "-10px";
    	break;
    	case "right":
    	text.style.marginRight = "-10px";
    	break;
    	case "up":
    	text.style.marginTop = "-10px";
    	break;
    	case "down":
    	text.style.marginBottom = "-10px";
    	break;
    	}
    }
    </script>
    
    </head>
    
    <body>
    <input id="move" value="move left" onclick="moveTextLeft('left');" type="button" />
    <input id="move" value="move right" onclick="moveTextLeft('right');" type="button" />
    <input id="move" value="move up" onclick="moveTextLeft('up');" type="button" />
    <input id="move" value="move down" onclick="moveTextLeft('down');" type="button" />
    <div id="moveable" style="margin-left: 100px; margin-right: 100px;">This textcan move</div>
    
    </body>
    </html>
    Please help me out, I want that whenever the user clicks the button, no matter how many times, the text moves.

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    247
    First of all you are not moving text you are moving "div" element. Since div element is a block level element it takes up whole width of a screen. You tried to work this out by applying margin-left and margin-right properties.

    So what about buttons which are not working?

    First if you add border to your "div" and "body" elements you'll see what's going on. Second you have chosen wrong way to do it. Let's start from first button which says "move text left".

    When user presses the "move left" button text (actually div element) moves to the left. You accomplish that by setting up new margin-left property value. The same applies for remaining three buttons. What happens in the background is this.

    You set div's inline style attribute to look like this:

    Code:
     <div id="moveable" style="margin-left: -10px; margin-right: 100px;">This textcan move</div>
    so when you press this "move left" button once again nothing actually happens because you are setting property that is already set up and you set it to the same value again and again... The same is true for the other three buttons which works the same way.


    Here's how you could do it:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<style type="text/css">
    		#p {
    			display: table;
    			position: relative;
    		}
    	</style>
    	<script>
    		function moveText(side)
    		{
    			var p = document.getElementById('p');
    			var contElem = document.getElementById('container');
    			
    			switch (side)
    			{
    				case "left":
    				{
    					var curPosition = p.offsetLeft - offsetStart;
    					var newPosition = curPosition -10 - offsetStart;
    
    					if (newPosition < 0)
    					{
    						alert("Cannot move text left from its starting position!!");
    						break;
    					}
    					
    					p.style.left = newPosition + "px";
    					break;
    				}
    				case "right":
    				{
    					var curPosition = p.offsetLeft;
    					var newPosition = curPosition +10;
    					
    					if (newPosition > (contElem.offsetWidth - p.offsetWidth))
    					{
    						alert("Cannot move text any further. Please move it in the opposite direction!!");
    						break;
    					}
    					
    					p.style.left = newPosition + "px";
    					break;
    				}
    				case "up":
    				{
    					var curPosition = p.offsetTop - offsetTopStart;
    					var newPosition = curPosition - 10 - offsetTopStart;
    					
    					if (curPosition <= 0)
    					{
    						alert("Cannot move text up from its starting position!!");
    						break;
    					}
    				
    					p.style.top = newPosition + "px";
    					break;
    				}
    				case "down":
    				{
    					var curPosition = p.offsetTop;
    					var newPosition = curPosition +10;
    					
    					p.style.top = newPosition + "px";
    					break;
    				}
    				default:
    					alert("Ooops something went wrong!!");
    					break;
    			}
    		}
    	</script>
    </head>
    <body>
    	<div id="container"><p id="p">This text can move!!</p></div>
    	<p>Press one of the following buttons to change text position:</p>
    	<input type="button" value="left" onclick="moveText(this.value)" />
    	<input type="button" value="right" onclick="moveText(this.value)" />
    	<input type="button" value="up" onclick="moveText(this.value)" />
    	<input type="button" value="down" onclick="moveText(this.value)" />
    	<script>
    		var offsetStart = document.getElementById('p').offsetLeft;
    		var offsetTopStart = document.getElementById('p').offsetTop;
    	</script>
    </body>
    </html>

  3. #3
    Join Date
    May 2013
    Posts
    55
    Why don't you just do:

    p.style.left = p.offsetLeft - 10 + "px" ???

    It worked, but its not moving 10px, please explain.

  4. #4
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    247
    It's not moving 10 px because you get offsetLeft value from elements offsetParent node which is "html" element or "body" element. This starting value in this case (using google-chrome) is 8px. So when you move your element to the left by 10 you actually move it only 2px.

    To simplify things we could do it other way from the beginning. We'll set our "div" element position to relative. That way we'll get offsetLeft value for our "p" element from nearest positioned element which will be our "div" element and we'll get rid of this trailing offset value from the first example.

    Here's the updated version of the code:


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<style type="text/css">
    		div {
    			position: relative;
    		}
    		#p {
    			display: table;
    			position: relative;
    			color: red;
    		}
    		
    	</style>
    	<script>
    		function moveText(side)
    		{
    			var p = document.getElementById('p');
    			var contElem = document.getElementById('container');
    			
    			switch (side)
    			{
    				case "left":
    				{
    					var curPosition = p.offsetLeft;
    					var newPosition = curPosition -10;
    
    					if (newPosition < 0)
    					{
    						alert("Cannot move text left from its starting position!!");
    						break;
    					}
    					
    					p.style.left = newPosition + "px";
    					break;
    				}
    				case "right":
    				{
    					var curPosition = p.offsetLeft;
    					var newPosition = curPosition +10;
    					
    					if (newPosition > (contElem.offsetWidth - p.offsetWidth))
    					{
    						alert("Cannot move text any further. Please move it in the opposite direction!!");
    						break;
    					}
    					
    					p.style.left = newPosition + "px";
    					break;
    				}
    				case "up":
    				{
    					var curPosition = p.offsetTop;
    					var newPosition = curPosition - 10;
    					
    					if (curPosition <= 0)
    					{
    						alert("Cannot move text up from its starting position!!");
    						break;
    					}
    				
    					p.style.top = newPosition + "px";
    					break;
    				}
    				case "down":
    				{
    					var curPosition = p.offsetTop;
    					var newPosition = curPosition +10;
    					
    					p.style.top = newPosition + "px";
    					break;
    				}
    				default:
    					alert("Ooops something went wrong!!");
    					break;
    			}
    		}
    	</script>
    </head>
    <body>
    	<div id="container"><p id="p">This text can move!!</p><p id="proba"></p></div>
    	<p id="proba"></p>
    	<p>Press one of the following buttons to change text position:</p>
    	<input type="button" value="left" onclick="moveText(this.value)" />
    	<input type="button" value="right" onclick="moveText(this.value)" />
    	<input type="button" value="up" onclick="moveText(this.value)" />
    	<input type="button" value="down" onclick="moveText(this.value)" />
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles