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.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using code by calling a function

    Can I create a code in some way that I can use the same code by just calling it?

    I'll explain myself better.

    I have this code to show a selector.

    Code:
    <select id="mySelect" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
    <option>Select an option</option>
    <option value="http://www.google.com">Orange</option>
    <option value="http://www.google.com">Pineapple</option>
    <option value="http://www.google.com">Banana</option>
    </select>
    I want to use the same code in all the pages of my site, but I don't want to copy and paste the code.

    Could I do something like giving a name to the script let say: MySelect

    and the just do something like: call MySelect

    so it will write the selector whatever I write call Myselect or something like that?

    It would work a solution in Javascripg, .css or JQuery

    Thank you so much

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Yes, it is called a function, just as you mention in your title(?).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Does he mean he wants to remove the script from inline and place it in a separate function?

    Code:
    <select id="mySelect" onchange="changeURL(this)">
    <option value = "">Select an option</option>
    <option value="http://www.google.com">Orange</option>
    <option value="http://www.google.com">Pineapple</option>
    <option value="http://www.google.com">Banana</option>
    </select>
    
    <script type = "text/javascript">
    function changeURL(which) {  // note that the name of the function must be unique!
    var val = which.value;
    if (val !="") {
    window.location.href = val;
    }
    }
    
    </script>

    If you mean you want to include that same code in all your web pages, then indeed copy and paste is the answer.
    Last edited by Philip M; 12-16-2012 at 10:55 AM.

    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.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by Philip M View Post
    If you mean you want to include that same code in all your web pages, then indeed copy and paste is the answer.
    Or any of the many varieties of server side include.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    I think he means that he does *NOT* want to have to write the [icode] ... onchange="..."...[/icpde] and that he wants the onchange event to automatically be added on all pages.

    SAMUVK: If indeed that is what you mean, I'd suggest using a CSS class name to indicate which <select>s you want to attach the code to.

    Code:
    <select class="urlSelector">
    ...
    </select>
    And then have a "urlSelector.js" file that you include on each page.

    If you include the file *JUST BEFORE* the </body> of the page you can make it completely unobtrusive.

    In other words, your overall page might be something like:
    Code:
    <html>
    <head>
        ...
    </head>
    <body>
        ...
        <select class="urlSelector">
            <option>Select an option</option>
            <option value="http://www.google.com?q=orange">Orange</option>
            <option value="http://www.google.com?q=pineapple">Pineapple</option>
            <option value="http://www.google.com?=banana">Banana</option>
        </select>
        ...
    
    <script type="text/javascript" src="urlSelector.js"></script>
    </body>
    </html>
    And then the contents of your urlSelector.js file (or whatever you choose to name it) could be something like this:
    Code:
    (
      function( ) /* anonymous master function
      {
          var sels = document.getElementsByTagName("select");
          for ( var s = 0; s < sels.length; ++s ) 
          {
              var sel = sels[s];
              if ( sel.className.indexOf("urlSelector") >= 0 ) 
              { 
                  sel.onchange=changeURL; 
              }
          }
          function changeURL( )
          {
              var url = this.value;
              if ( url != "" ) location.href = url;
          }
      } // end of master function
    )(); // self-invoke master function
    Lots of other ways to skin this particular cat, but one advantage of this one is that you could have two or more such <select>s on any HTML page, if desired.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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