www.webdeveloper.com
Results 1 to 15 of 15

Thread: Dynamic 'onClick' doesn't work?

  1. #1
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257

    Question Dynamic 'onClick' doesn't work?

    Hello all!

    I've got a problem/question:

    Can't you 'set' the onClick event dynamically?

    my code:
    Code:
    <html>
     <head>
      <script language="javascript">
    var divElement
    
    function showDiv()
     {divElement = document.createElement('DIV')
      document.body.insertAdjacentElement('beforeEnd', divElement)
    
      divElement.style.width = '120'
      divElement.style.height = '100'
    
      divElement.innerText = 'bladibladibla \ntexttext'
    
      divElement.style.position = 'absolute'
      divElement.style.top = event.y
      divElement.style.left = event.x
    
      divElement.onClick = 'javascript:alert("Testing")'
    
    alert(document.body.innerHTML)
     }
    </script>
    
     </head>
    
     <body>
      <input type="button" value="click" onclick="showDiv()">
     </body>
    </html>
    As you can see in the alert, which shows you the innerHTML, it seems to be good. But when you click on the div, nothing happens... Can't you set the 'onClick' event dynamically?
    JayDie

    There are 10 types of people:
    - People who understand binary code
    - People who don't understand binary code

  2. #2
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    5,298
    Yes, but from memory, you can only call a function which takes no parameters.

    Try adding a function which displays an alert prompt, then invoke this function by dynamically setting it in the onClick event.

    Regards,
    Andrew Buntine.

  3. #3
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    If you mean something like this:
    Code:
     
    ...
    <script language="javascript">
    var divElement
    
    function showDiv()
     {...
      divElement.onClick = 'alertSomething()'
      ...
    alert(document.body.innerHTML)
     }
    
    function alertSomething()
     {alert("Testing")
     }
    </script>
    ...
    ...that doesn't work...

    Do I have to give the Div an ID, then get it by ID and set the onClick event? That's not really what I want, but if that works and it is the only choice...?
    JayDie

    There are 10 types of people:
    - People who understand binary code
    - People who don't understand binary code

  4. #4
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    These two also don't solve my problem:
    Code:
    ...
    divElement.id = 'divID'
    
    document.getElementById('divID').onClick = 'function()'
    document.getElementById('divID').setAttribute('onClick', 'function()')
    JayDie

    There are 10 types of people:
    - People who understand binary code
    - People who don't understand binary code

  5. #5
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    If I create a string which contains all attributes and I add this to the body, it works. But this isn't very nice...

    Code:
    var divElement
    
    divElement = '<div style="position: absolute; blabla" onClick="function()">texttext</div>'
    
    document.body.innerHTML += divElement
    Why does my first solution not work?!
    JayDie

    There are 10 types of people:
    - People who understand binary code
    - People who don't understand binary code

  6. #6
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    5,298
    You should not need quotes or parantheses. Also, it should be in lowercase. Try it like this:
    Code:
    divElement.onclick = alertSomething;
    Regards,
    Andrew Buntine.

  7. #7
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    Thanks buntine for your reaction.

    Buntine: Also, it should be in lowercase
    guess that doesn't matter?

    If I do:
    Code:
    divElement.onclick = function()
    it immediately executes the function (as aspected)
    Code:
    divElement.onclick = 'function()'
    doesn't work
    Code:
    divElement.onclick = (function())
    it immediately executes the function (as aspected)
    Code:
    divElement.onclick = ('function()')
    doesn't work
    Code:
    var func = 'function()'
    divElement.onclick = func
    doesn't work

    JayDie

    There are 10 types of people:
    - People who understand binary code
    - People who don't understand binary code

  8. #8
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    5,298
    So, you have it working? The code i gave you does work..
    Code:
    <script language="javascript">
    var divElement;
    
    function showDiv()
    {
       divElement.onclick = alertSomething;
       alert(document.body.innerHTML);
    }
    
    function alertSomething()
    {
       alert("Testing");
    }
    </script>
    By the way, you should always end your statements with a semicolon.

    Regards,
    Andrew Buntine.

  9. #9
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257

    Thumbs up PROBLEM SOLVED

    YES YES YES

    Now it works... What I did wrong:

    Your solution, I still placed the () after the function.

    Now it works. I wanted to add the parameter 'this' to the function, but it isn't necessary, because if I say in the function 'this.id' it'll give the correct ID.

    Buntine, you say:
    you should always end your statements with a semicolon
    for JavaScript this isn't necessary? Only if you place to statements after each other? I know in C/C++ you have to place the semicolon, but at JavaScript it isn't nesessary?

    Thanks Buntine, great work!!!
    JayDie

    There are 10 types of people:
    - People who understand binary code
    - People who don't understand binary code

  10. #10
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    5,298
    Thats ok, im glad to help.

    I realise its not necessary, but it is definetely a good practise. You dont need too add semi-colons, though, i would advise you to.
    All professionally written JavaScript applications implement the use of semi-colons.

    Regards,
    Andrew Buntine.

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    If I do:

    code:--------------------------------------------------------------------------------divElement.onclick = function()
    ..............
    As far as I know, there are two basic accepted way to fire a function using a dynamic event handler:

    1.

    obj.onevent=some_function;

    2.

    obj.onevent= function(){
    some_function(param1,param2);
    ...
    other statements here
    ...
    }

    The second is used for multiple function firing or for firing a function with one or more parameters.

  12. #12
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    5,298
    Thanks Kor,

    I have often wondered how you would go about invoking a function with one or more parameters using this method.

    Regards,
    Andrew Buntine.

  13. #13
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,487
    You can also use DOM2 Events:
    Code:
    <script type="text/javascript">
    //<![CDATA[
    	onload = function()
    	{
    		document.getElementById('foo').addEventListener('click', function() { alert('event fired!'); }, false);
    	}
    //]]>
    </script>
    Of course this assumes you've already created an element with its id attribute as "foo".

  14. #14
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    5,298
    JavaScript is becoming more and more like Java!

  15. #15
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Originally posted by fredmv
    You can also use DOM2 Events:
    Code:
    <script type="text/javascript">
    //<![CDATA[
    	onload = function()
    	{
    		document.getElementById('foo').addEventListener('click', function() { alert('event fired!'); }, false);
    	}
    //]]>
    </script>
    Of course this assumes you've already created an element with its id attribute as "foo".
    Thanks, I didn't now this way...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.59374 seconds
  • Memory Usage 3,006KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (13)bbcode_code
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • bbcode_parse_start
  • postbit_imicons
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates