[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

adding a parameter to a button input

Posted on 2014-07-14
4
Medium Priority
?
294 Views
Last Modified: 2014-07-17
<script>          
            $("#leftButton").click(function () {
                  moveObject('left', numberOfPixels);
            });
</script>
<input type="button" id="leftButton" value="Left" />


The snippet above is used to move an object on the screen. I would like to do the same with more that one object. I  think I need to do something like:

<script>          
            $("#leftButton").click(function (objID) {
                  moveObject('left', numberOfPixels,objID);
            });
</script>

If this is the way to go, how do you pass a parameter with an input button?
0
Comment
Question by:Gary Samuels
  • 2
  • 2
4 Comments
 
LVL 21

Expert Comment

by:Randy Poole
ID: 40195335
you wouldn't pass a parameter.  Are you trying to move all objects at the same time?  Selected objects?  Or?
0
 

Author Comment

by:Gary Samuels
ID: 40195424
just a selected objects, one at a time. The buttons are within a form so I can't change the type. It works great for a single object.

Here's the full code:
<script>
      $(document).ready(function() {
            var numberOfPixels = 20;
           
            $("#downButton").click(function () {
                  moveObject('down', numberOfPixels);
            });
           
            $("#upButton").click(function () {
                  moveObject('up', numberOfPixels);
            });
           
            $("#leftButton").click(function () {
                  moveObject('left', numberOfPixels);
            });
           
            $("#rightButton").click(function () {
                  moveObject('right', numberOfPixels);
            });
      });
     
      function getPosition() {
            return $('#graphicCount1').position();
      }
     
      function moveObject(direction, pixels) {
            var position = getPosition();
            var top = position.top;
            var left = position.left;
           
            if (direction == 'down') {
                  top += pixels;
            }
            else if (direction == 'up') {
                  top -= pixels;
            }
            else if (direction == 'right') {
                  left += pixels;
            }
            else if (direction == 'left') {
                  left -= pixels;
            }
            var imageElement = $('#graphicCount1');
            $(imageElement).animate({
                        'top' : top + 'px',
                        'left' : left + 'px'
                  }, 500, function() {});
      }
</script>

        <td class="moveposition" width="25%">
                  Move:
                  <input type="button" id="downButton" value="Down" />
                  <input type="button" id="upButton" value="Up" />
                  <input type="button" id="leftButton" value="Left" />
                  <input type="button" id="rightButton" value="Right" />        
        </td>
        <td class="moveamount" width="25%">
                  Amount to Move:
                  <input type="button" id="downAmount" value="Down" />
                  <input type="text"  id="moveamount" value="20" size="1">
                  <input type="button" id="upAmount" value="Up" />
        </td>
0
 

Author Comment

by:Gary Samuels
ID: 40195431
I.O.U., I think this was your code from last week and I couldn't get it to work until I figured out I needed to load jquery. I was loading javascript.
0
 
LVL 21

Accepted Solution

by:
Randy Poole earned 2000 total points
ID: 40195447
What I mean
<script>
      $(document).ready(function() {
            var numberOfPixels = 20;
            
            $("#downButton").click(function () {
                  moveObject('down', numberOfPixels);
            });
            
            $("#upButton").click(function () {
                  moveObject('up', numberOfPixels);
            });
            
            $("#leftButton").click(function () {
                  moveObject('left', numberOfPixels);
            });
            
            $("#rightButton").click(function () {
                  moveObject('right', numberOfPixels);
            });
      });
      
      function getPosition(id) {
            return $(id).position();
      }
      
      function moveObject(direction, pixels,id) {
      			// if no id is passed then use original
      			id=!id?'#graphicCount1';
            var position = getPosition(id);
            var top = position.top;
            var left = position.left;
            
            if (direction == 'down') {
                  top += pixels;
            }
            else if (direction == 'up') {
                  top -= pixels;
            }
            else if (direction == 'right') {
                  left += pixels;
            }
            else if (direction == 'left') {
                  left -= pixels;
            }
            var imageElement = $(id);
            $(imageElement).animate({ 
                        'top' : top + 'px',
                        'left' : left + 'px'
                  }, 500, function() {});
      }
</script>

        <td class="moveposition" width="25%">
                  Move:
                  <input type="button" id="downButton" value="Down" />
                  <input type="button" id="upButton" value="Up" />
                  <input type="button" id="leftButton" value="Left" />
                  <input type="button" id="rightButton" value="Right" />        
        </td>
        <td class="moveamount" width="25%">
                  Amount to Move:
                  <input type="button" id="downAmount" value="Down" />
                  <input type="text"  id="moveamount" value="20" size="1">
                  <input type="button" id="upAmount" value="Up" />
        </td>

Open in new window

With this code you can now call the object name you would like to call:
moveObject('down', numberOfPixels,'#graphicCount1' );

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

865 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question