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
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Problem with passing object as argument

    PHP Code:
    function $(x) {
      return 
    document.getElementById(x);
    }

    function 
    test(x) {
      
    alert(x.id);
    }

    function 
    init() {
      var 
    = {};

      
    o.id "a";
      $(
    "one").addEventListener("click", function () {test(o);});

      
    o.id "b";
      $(
    "two").addEventListener("click", function () {test(o);});

      
    o.id "c";
      $(
    "three").addEventListener("click", function () {test(o);});
    }

    window.onload init
    I have some code similar to this. When the HTML elements with id's "one", "two", or "three" are clicked, they all alert "c", but I want them to alert the respective values (a, b, and c).

    How can I pass the object by value and not by reference? I guess in this simple example you would just define two more objects, but my code is actually within a for-loop. The object properties are changed each iteration (ideally each iteration creates a new object) and then passed to the function.
    Running Windows 7 x64

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Your object 'o' persists in the closure, so its last-assigned value is always read.
    One way could be to do this:
    Code:
    function init() 
    {
      var t = [ 'a', 'b', 'c' ];
    
      $("one").addEventListener("click", function () {test( t[0] );});
    
    
      $("two").addEventListener("click", function () {test( t[1] );});
    
    
      $("three").addEventListener("click", function () {test( t[2] );});
    }

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Thanks Logic Ali. I guess I simplified my example a bit too much though, or wasn't clear enough. The function test takes an object as a parameter, not just a simple string.
    Running Windows 7 x64

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    You can't do it.

    You are under the mistaken impression that there are three (or four) objects in use.

    NOT TRUE.

    JavaScript *ALWAYS* passed object by REFERENCE. You can never actually hold an object in a variable.

    Now, if you REDEFINED the object between adding each listener, you could do it with a closure.
    Code:
    <html>
    <head>
    <script>
    function $(x) {
      return document.getElementById(x);
    }
    
    function test(x) {
      alert(x.id);
    }
    
    function addClickTo( towhat, withwhat )
    {
        towhat.addEventListener("click", function( ) { test(withwhat); } );
    }
    
    function init() {
      var o = { id: "a" };
      addClickTo( $("one"), o );
    
    
      o = { id: "b" };
      addClickTo( $("two"), o );
    
      o = { id: "c" };
      addClickTo( $("three"), o );
    
    }
    
    window.onload = init;  
    </script>
    </head>
    <body>
    <input type="button" id="one" value="one"/>
    <input type="button" id="two" value="two"/>
    <input type="button" id="three" value="three"/>
    </body>
    </html>
    Last edited by Old Pedant; 01-05-2012 at 07:43 AM.
    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.

  • Users who have thanked Old Pedant for this post:

    qwertyuiop (01-05-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I guess the other way to do it would be to clone the object as part of the closure function:
    Code:
    <script>
    function $(x) {
      return document.getElementById(x);
    }
    
    function test(x) {
      alert(x.id);
    }
    
    function addClickTo( towhat, withwhat )
    {
        var usethis = { }
        /* write code here to clone withwhat into usethis */
        towhat.addEventListener("click", function( ) { test(usethis); } );
    }
    
    function init() {
      var o = { };
      o.id = "a";
      addClickTo( $("one"), o );
    
      o.id = "b";
      addClickTo( $("two"), o );
    
      o.id = "c";
      addClickTo( $("three"), o );
    
    }
    
    window.onload = init;  
    </script>
    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
    •