Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post

    Javascript buttons help (I'm a noob at javascript)

    Hey,
    I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it,

    Here is my form with the two textboxes and submit button:
    <form>
    x: <input type="text" name="x" /><br />
    y: <input type="text" name:"y" /><br />
    <input type="submit" value="Submit"/><br />
    </form>

    And i need it so that they change the values of these:

    //this shows where my sprite will start on the canvas
    var block_x;
    var block_y;
    searched the internet for hours and cant really find anything i understand or works.
    any help is much appreciated

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    You don't need a form for this. Forms are used to send user input data to a server side script for processing.

    What you need here is just a simple button. Attach an onclick event handler to the button which takes the user inputed x and y values from the input boxes and assigns them to wherever you need them.

  • Users who have thanked webdev1958 for this post:

    drew_uk (03-01-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thank you, I'll try it now

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    Cant really find what to put under the function once i made it an onclick event

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Here you are:-

    Code:
    x: <input type="text" id = "xval" /><br />
    y: <input type="text" id = "yval" /><br />
    <input type="button" value="Submit" onclick = "doIt()"><br />
    
    <script type = "text/javascript">
    function doIt() {
    //this shows where my sprite will start on the canvas
    var block_x = Number(document.getElementById("xval").value) || 0;  // trap non-numeric entries
    var block_y = Number(document.getElementById("yval").value) || 0;  
    alert (block_x + " " + block_y);  // for testing
    }
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    drew_uk (03-01-2012)

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thankyou very much!
    only problem is the sprite doesnt move, is it possible to move the sprite or cant it be done?

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by drew_uk View Post
    Thankyou very much!
    only problem is the sprite doesnt move, is it possible to move the sprite or cant it be done?
    Yes the sptite can be moved. After all, that is the whole point of a sprite. Post your code. It sounds like you just need to do some debugging to get your code to work.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    look below
    Last edited by drew_uk; 03-01-2012 at 09:39 PM.

  • #9
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Drew... Please put your script inside tags like this [code] Your Script [/ code] (without the space)

  • #10
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    okay sorry about that didnt know

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    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>
    <title> My canvas </title>
    <style>
    canvas{
    	display:block;
    	margin:auto;
    	border:1px double black;
    }
    p.instructions {text-align:center}
    h1{text-align:center}
    </style>
    	
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript">
      
     
      var context;
      
      //this shows where my sprite will start on the canvas
      var block_x;
      var block_y;
      //this shows how big my sprite will be
      var block_w = 20;
      var block_h = 40;
      
      var canvasWidth;
      var canvasHeight;
      //Flags
      var xKey = false;
      var cKey = false;
      
      var img=new Image();
    
      // This function initialises various parameters used.
    function init() {
      context = $('canvas')[0].getContext('2d');
      canvasWidth = $('#canvas').width();
      canvasHeight = $('#canvas').height();
    
      
    
      
      //positions the sprite
      
      block_x = 290;
      block_y = 70;
      
    //this creates the interval function
      window.setInterval(function(){
    	  draw();
    	  // this function goes from the bottom left to top right of the canvas
    	context.moveTo(0, canvasHeight);
        context.lineTo(canvasWidth, 0);
        context.stroke();
        
      }, 100);
      }
      //this function clears the canvas
      function draw() {
    	 //this function draws a line from one corner to the opposite corner
      context.moveTo(0,0);
        context.lineTo(canvasWidth, canvasHeight);
        context.stroke();0
      context.clearRect(0,0,canvasWidth,canvasHeight);
        	 //this draws a red circle inside my canvas
      context.fillStyle="#FF0000";
    context.beginPath();
    context.arc(200,100,50,0,Math.PI*2,true);
    context.closePath();
    context.fill();
        
      //this determines any positional changes of the sprite going left
      if (xKey) {
         block_x -= 10;
         } 
    	 //to move the sprite to the left
    	 if (cKey) {
         block_x += 10;
         } 
    	 
    	 
    
    //this makes my sprite and displays it as an image
    	 img.onload = function(){
    context.drawImage(img,block_x, block_y, block_w, block_h);
    };
    img.src="Sprite.jpg";
    	 
    
      //shows co ordinates of the sprite and refreshes them at 100ms
      
      		 var pageCoords = "( x " + block_x + ", y " + block_y + " )";      
    
    	 $("span:first").text( pageCoords);
    }
    
    
    $(document).ready(function() {
    	
    	init();
    	//moves the sprite to the left when the x kay is held down
        $(document).on("keydown", function(evt) {
           if (evt.which == 88) xKey = true;                
        });
    				   
        $(document).on("keyup", function(evt) {
           if (evt.which == 88) xKey = false;
        });
    	//moves the sprite to the right when the c key is held down
    	 $(document).on("keydown", function(evt) {
           if (evt.which == 67) cKey = true;                
        });
    				   
        $(document).on("keyup", function(evt) {
           if (evt.which == 67) cKey = false;
        });  
    	//shows the co ordinates for when the mouse is moved
    	$("div").mousemove(function(e){
    			 var clientCoords = "( x " + e.clientX + ", y " + e.clientY + " )"; 
    			 	 $("span:last").text( clientCoords); 
        });
    	
    
    });
    
    //positional changes going right
    x
      
     
    
       
      </script>
      </head>
      <body> 
      <h1>S11725832</h1> 
      <script>
    //opens an alert box for my insturctions
      function show_alert()
    
    {
    alert("Welcome to my canvas, to move the sprite use the x key to move left and the c key to move right. The co-ordinates for the sprite will be found on the left hand side of the screen along with the co-ordinates of the mouse cursor.");
    }
     
    </script>
    <p class="instructions">
         <input type="button" onClick="show_alert()" value="Instructions">
         </p>  
     </p>
     <p>
     Co-ordinates of sprite
       <span>Move the mouse over the div.</span>
       Co-ordinates of mouse
     <span>&nbsp;</span>
       </p>  
       <p>
       x: <input type="text" id = "xval" /><br />
    y: <input type="text" id = "yval" /><br />
    <input type="button" value="Submit" onclick = "doIt()"><br />
     <script>
      function doIt() {
    //this shows where my sprite will start on the canvas
    var block_x = Number(document.getElementById("xval").value) || 0;  // trap non-numeric entries
    var block_y = Number(document.getElementById("yval").value) || 0;  
    alert (block_x + " " + block_y);  // for testing
    }
       </script>
       </p>
       
       <p>
       <!--on a button click it makes the page refresh thus returning the sprite to its original position.!-->
       <input type="button" value="Return Sprite" onclick="javascript:history.go(0);"/>
       </p>
    
    
       <div>
       <canvas id="canvas" width="420" height="330"></canvas>
       </div>
       <script>
     
     
          
      
    
    
    </script>
    	 </script>
         </body>
         </html>

  • Users who have thanked drew_uk for this post:

    MancunianMacca (03-01-2012)

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    Anybody?

  • #13
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by drew_uk View Post
    Anybody?
    If you wrote that code, it shouldn't take long to debug it. You can use a debugger, the error console in your browser or simply alert() statements throughout your code to check varibale values and program logic.

    Which line is giving you an error and what is the error message?

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    its not giving me any error, it jsut doesnt move the sprite when i type in co-ordinates, thats why i wondered if it was possible or not?

  • #15
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    ok, then we have 2 options now.

    1) I or someone else spends some time going through your code to debug it for you.

    or

    2) You debug your code.

    If I was debugging your code, I would go to the line(s) which are supposed to move the sprite and check the values of all the variables in that line(s) using an alert(), or some sort of debugger (like Firebug). If any values are incorect, then back track through your code using alert()'s or a debugger to find the root source of the problem and then fix it.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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