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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using a function's objects in onclick

    I have a function that is supposed to take a button and change its onclick so that when pressed, it changes the value of an object to something. The problem is, the object I need the onclick to change is one of the function arguments, and thus, when the button is pressed, the argument no longer exists because by then, all the values in the function will be gone, because the function will have ended... what I was thinking of doing is rather than putting the name of the object in onclick, putting the object itself there... unfortunately, all my attempts to do so have failed horribly, and I'm not sure it's possible...
    Here's a little example I made to try to help explain my problem...
    Code:
    <html>
    <head>
    </head>
    <body>
    <input id='AButton' type='button' value='A Button'>
    <input id='AnotherButton' type='button' value="Another Button"><br>
    <input type='button' value="Tell me the value of blah!" onclick='alert(blah.myvalue)'>
    <input type='button' value="Tell me the value of blah2!" onclick='alert(blah2.myvalue)'>
    <script>
    //These are the objects whose values should be changing
    var blah=new Object()
    blah.myvalue="I have a value.  I'm special."
    var blah2=new Object()
    blah2.myvalue="I have a value too.  YAY!"
    
    //This function is supposed to take a button, an object and a value,
    //then change the onclick of the button to make the object's 'myvalue' property become the value parameter...
    // but doesn't work, read comments
    function MakeButtonChangeBlahValue(thebutton,theblah,thevalue)
    {
    	//Doesn't work because by the time the button is pressed, theblah doesn't exist because the function already finished
    	thebutton.onclick='theblah.myvalue='+thevalue
    	
    	//Doesn't work.  Why?  Because Javascript doesn't want it to.
    	thebutton.onclick=theblah+'.myvalue='+thevalue
    	
    	//Read above comment
    	thebutton.onclick=theblah.myvalue+'='+thevalue
    	
    	//This doesn't give any error, but the problem is that it changes the value instantly, rather than when the button is pressed
    //	thebutton.onclick=theblah.myvalue=thevalue
    }
    
    //'Should' change the onclick of the buttons to change the value of the blahs when they're clicked on... but doesn't because function doesn't work
    MakeButtonChangeBlahValue(document.getElementById('AButton'),blah,"This is what I want my value to be")
    MakeButtonChangeBlahValue(document.getElementById('AnotherButton'),blah2,"This is what I want my other value to be")
    
    
    </script>
    </body>
    </html>
    Any ideas anyone?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    why not just use this:

    <input id='AButton' type='button' value='A Button' onclick="blah.value='This is what I want my value to be'">
    <input id='AnotherButton' type='button' value="Another Button" onclick="blah.value='This is what I want my other value to be'"><br>
    <input type='button' value="Tell me the value of blah!" onclick='alert(blah.myvalue)'>
    <input type='button' value="Tell me the value of blah2!" onclick='alert(blah2.myvalue)'>
    <script>
    //These are the objects whose values should be changing
    var blah=new Object()
    blah.myvalue="I have a value. I'm special."
    var blah2=new Object()
    blah2.myvalue="I have a value too. YAY!"
    </script>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I need to use the function to do it, because I need to be able to change what the onclick changes the value to dynamically. The example is oversimplistic, just to help illustrate the problem... in my real code, it would take me hours to actually code in every possibility the way you suggest in your example...

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Without commenting on whatever it is you're trying to do

    this:

    thebutton.onclick='theblah.myvalue='+thevalue

    ...does nothing. To work, HTML event handlers are wrapped in function objects, the usual way to store callable JS code. This:

    <div onclick="alert('foo')">

    ...looks like this at the DOM level:

    HTMLElement.onclick = function() { alert('foo') }

    If you want to dynamically re-write HTML event handlers, you'll need to explicitly wrap them; the only other way is to put the code in a separate (top-level) function and assign a reference (pointer) like:

    HTMLElement.onclick = function_name;

    ...without the operator pair (parentheses) which is actually not part of the function's name, but serves to invoke it.

    One other thing: functions are full-fledged data types in JavaScript - you can store them, parse & modify them (after using .toString()), assign them to arrays, objects, whatever. btw, the above explains why this:

    <form......onsubmit="validate()">

    ...doesn't work: the call to validate is, you guessed it, wrapped inside a function object, and its return value remains there unless you explicitly pass it from the wrapper:

    <form......onsubmit="return validate()">

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by adios
    ...does nothing. To work, HTML event handlers are wrapped in function objects, the usual way to store callable JS code. This:

    <div onclick="alert('foo')">

    ...looks like this at the DOM level:

    HTMLElement.onclick = function() { alert('foo') }
    Actually in NS, it looks like:
    function onclick(event) {
    alert("foo");
    }

    And in IE:
    function anonymous() {
    alert("foo");
    }


  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    jkd...

    Aware of that - but I think it's irrelevent - I believe those are just platform-specific approaches to 'naming' the lambda functions. You can replace either of those handlers with truly anonymous function objects and they'll function (sorry) as before. It seems they're bound to the event, if that's the correct terminology, by their position in the instance hierarchy, not by any particular naming of the contained object. Make sense?

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by adios
    jkd...

    Aware of that - but I think it's irrelevent - I believe those are just platform-specific approaches to 'naming' the lambda functions. You can replace either of those handlers with truly anonymous function objects and they'll function (sorry) as before. It seems they're bound to the event, if that's the correct terminology, by their position in the instance hierarchy, not by any particular naming of the contained object. Make sense?
    Crystal - I agree with you 100% - I just think browser-generated methods dynamically created from your set attributes are very interesting, esp. how they differ between browsers. And is definitely noteworthy pointing out how *they* do it, but is no means required by you.

    I always use (real) anonymous functions for event handlers, and for permanent event listeners assigned via addEventListener. (When I want to remove them though, much more convenient to define it somewhere though).

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Agreed. Very interesting.

    Makes one wonder as to the why of proprietary approaches, as well as the how..

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts

    To learn more...?

    fasinating stuff fellas. Where can I read more about the inner sanctum of the function object and all it's esoteric workings?

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts

    Re: To learn more...?

    Originally posted by RadarBob
    fasinating stuff fellas. Where can I read more about the inner sanctum of the function object and all it's esoteric workings?
    Check out http://developer.netscape.com/docs/m.../contents.html

    As for learning the inner workings of the browser, you gotta experiment:

    <a href="#" onclick="alert(arguments.callee)">bla</a>

    Stuff like that.

    Edit:
    You learn something new everyday. I checked that in Opera, and it appears it does both:
    function anonymous(event) {
    alert(arguments.callee);
    }

    Last edited by jkd; 08-06-2002 at 04:26 AM.


  •  

    Posting Permissions

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