#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Posts
    80
    Rep Power
    7

    Passing Parameters to function question


    This is just kind of a general question. I'm sure it should be easy, but I can't find much online that explains how to do it the way I'm wanting to. I'm not doing anything in particular, it's more of just a way for me to learn how to do it, but the main thing I want to do is say have a function:

    Code:
    function getSizes(sizeW,sizeH) {
    // Code Here
    }
    For my HTML, I just have 2 text fields that let you enter a Width and Height value, and a button that, when clicked, would resize a div to those dimensions. I can do this just fine without the parameters, but now I kind of want to move onto something more and learn to use the parameters.

    Everything I've found online in the examples shows that in order to pass the parameters, you have to do it right when you call the function. So for instance, on my button, I would have to do:

    Code:
    <input type="button" onClick="getSizes(50,50)" value="Click me!">
    But that only helps me if I know going into it what the values are. If I want different values, right now I'd have to change it in the raw code. I'd like to set it up so that I don't have to enter the values like that, but rather, entering them into my 2 text-fields will pass them to the function when I click the button.

    I don't know if any of this makes sense. Like I said, I'm not trying to do anything in particular, it's just something to help me learn for future reference. Any help would be appreciated.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Code:
    <script>
    function getSizes(sizeW,sizeH,DIV) {
    document.getElementById(DIV).style.width = sizeW + "px";
    document.getElementById(DIV).style.height = sizeH + "px";
    }
    </script>
    
    <style>
    #resizer {
    border:solid 1px #000;
    padding:10px;
    }
    </style>
    
    <div id="resizer">
     Blah blah blah
    </div>
    
    <br/>
    <br/>
    
    <input type="button" value="Change Size" onclick="getSizes('400','320','resizer')"/>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Posts
    80
    Rep Power
    7
    While I appreciate the attempt, that doesn't really help what I'm trying to do. I know if I pass it through by manually typing it I can make it work. What I'm curious about is whether or not I can make it work without having to manually change the sizes each time in the raw code. This is what I'm trying to do:

    Code:
    <script>
    function resizeIt(sizeW,sizeH) {
    // Do Stuff 
    }
    </script>
    
    <b>H: </b><input type="text" id="height" size="15"><br>
    <b>W: </b><input type="text" id="width" size="15"><br>
    <input type="button" value="Click Me!" onClick="resizeIt()">
    The idea would be to then somehow pass the width and height entered, into those parameters in the function. It may not even be possible to do it that way, but I thought I'd ask. I can get them into the function if I just reference them like normal, so that's not much of a problem.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Oh... ok, from your original post... it seemed you wanted to get away from using the form to send a parameter; I miss understood.

    Try this:

    Code:
    <style>
    #resizer {
    border:solid 1px #000;
    padding:10px;
    margin-top:25px;
    margin-bottom:25px;
    }
    </style>
    
    <script>
    function resizeIt(sizeW,sizeH) {
    var w = document.getElementById(sizeW).value;
    var h = document.getElementById(sizeH).value;
    document.getElementById("resizer").style.width = w + "px";
    document.getElementById("resizer").style.height = h + "px";
    }
    </script>
    
    <div id="resizer">
    Blah blah blah
    </div>
    
    <b>H: </b><input type="text" id="height" size="15"><br>
    <b>W: </b><input type="text" id="width" size="15"><br>
    <input type="button" value="Click Me!" onClick="resizeIt('width','height')">
    Last edited by web_loone08; February 3rd, 2013 at 07:33 AM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Using document.getElementById() is one way to access HTML elements. I recommend you read these which explain more about working with forms:
    http://www.quirksmode.org/js/forms.html
    http://jibbering.com/faq/notes/form-access/
    Last edited by Kravvitz; February 3rd, 2013 at 08:43 AM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo