SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    someElement.onclick = someFunction: how to pass an argument to function?

    Hello,

    I have this bit of code that is working just fine:

    Code:
    someElement.onclick = someFunction;
    When element is clicked, someFunction is fired. Inside someFunction, I have this bit of code:

    Code:
    var theid = this.getAttribute('id');
    which retrieves the id of someElement.

    So far so good but...

    I would like to be able to use someFunction not only as the result of an onclick event. For example, I'd like to use it like that:

    Code:
    someFunction('the-id-hard-typed');
    Obviously, it wouldn't work since someFunction does not receive any argument. So I thought modify my code to like that:

    Code:
    someElement.onclick = someFunction(this.getAttribute('id'));
    But... it doesn't work...

    I would like to know how I can pass an argument to someFunction when it is the result of my onlick event so I can also use someFunction() without having to clone it (and change its name slightly) just so it can receive an argument.

    I hope my problem is clear so I can get an answer...

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can let your function decide if it is being passed a string.

    Code:
    function someFunction(){
        if(typeof arguments[0]=='string'){
            // use the argument as a string
        }
        else{
            // use argument[0](as an event or a 'this' element)
        }
        // more code 
    }
    or

    Code:
    function someFunction(hoo){
        if(typeof hoo=='string')hoo=document.getElementById(hoo);
        else hoo= hoo? hoo.target : window.event && event.srcElement;
        // more code using element hoo
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function someFunction(){
        if(typeof arguments[0]=='string'){
            // use the argument as a string
        }
        else{
            // use argument[0](as an event or a 'this' element)
        }
        // more code 
    }
    I'm a bit too... basic to understand that code

    Would it work with the following?

    Code:
    someElement.onclick = someFunction;
    someFunction('my-id');
    I'm sorry, I don't get how to call your function

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    Would it work with the following?

    Code:
    someElement.onclick = someFunction;
    someFunction('my-id');
    Yes it would. It's not too difficult to code up a simple test to demonstrates that it works.

    Code javascript:
    <html>
    <head>
    </head>
    <body>
    <button id="clickedElement">Click event</button>
    <button id="hardCoded">Hard-coded</button>
    <script>
    function someFunction () {
        var theid;
        if (typeof arguments[0] === 'string') {
            theid = arguments[0];
        } else {
            theid = this.getAttribute('id');
        }
        alert('The id is ' + theid);
    }
     
    var someElement = document.getElementById('clickedElement');
    someElement.onclick = someFunction;
     
    document.getElementById('hardCoded').onclick = function () {
        someFunction('my-id');
    };
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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