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 6 of 6
  1. #1
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,040
    Thanks
    10
    Thanked 92 Times in 90 Posts

    add onclick event to generated div syntax

    Hi, the below successfully creates a new div ..but the onclick= function() .. etc is not working, what is the correct syntax ?

    Code:
    	var newtab=document.createElement('div');
    	newtab.id='vm_item_tab_'+tabidx;
    	newtab.className='vm_item_tab_sel';
    	newtab.onclick=function() { 'load_article_tab('+tabidx+')'; };
    	newtab.innerHTML='{$vm_id}-'+tabidx;
    	document.getElementById('new_item_tab_container').appendChild(newtab);
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ummm...but your onclick function contains nothing but a string.

    You could change it to
    Code:
    newtab.onclick=function() { alert( 'load_article_tab('+tabidx+')' ); };
    to display that string.

    But I suspect that what you really want is simply:
    Code:
    newtab.onclick=function() { load_article_tab(tabidx); };
    That is, you want that function to, in turn, invoke the load_article_tab( ) function.

    Now, that's not going to work, unless there is one and only one tabidx value on your entire page. Because load_article_tab( tabidx ) will be called with whatever the value of tabidx happens to be at the time of the onclick.

    So you have two choices:
    (1) Create a "closure". That's a uniquely JavaScript nicety that allows you to "remember" the value of a variable from the time that the function was created. It would work quite well in this situation. Example:
    Code:
    function createDivClick( n )
    {
        var idx = n;
        var func = function() { load_article_tab(idx); }
        return func;
    }
    newtab.onclick = createDivClick(tabidx);
    ** BUT **
    (2) A simpler way for this particular case is this:
    Code:
    newtab.onclick=function() 
        { 
            var idx = Number( this.id.replace('vm_item_tab_", "" ) );
            load_article_tab( idx ); 
        }
    Last edited by Old Pedant; 06-06-2013 at 07:29 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:

    firepages (06-07-2013)

  • #3
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,040
    Thanks
    10
    Thanked 92 Times in 90 Posts
    Quote Originally Posted by Old Pedant View Post
    But I suspect that what you really want is simply:
    Code:
    newtab.onclick=function() { load_article_tab(tabidx); };
    That is, you want that function to, in turn, invoke the load_article_tab( ) function.

    Now, that's not going to work, unless there is one and only one tabidx value on your entire page. .....
    aha, OK, in this case tabidx is a global var whose value is dependant on which tab is active (and set onclick) so in this case your snippet above works fine, not sure why I had it quoted... probably from some reference online.?

    thanks for that... on to the next problem
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #4
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,040
    Thanks
    10
    Thanked 92 Times in 90 Posts
    i'm a muppet ...worked well until I added a second new tab b4 a page refresh ... which your code ...

    Code:
    newtab.onclick=function() 
        { 
            var idx = Number( this.id.replace('vm_item_tab_", "" ) );
            load_article_tab( idx ); 
        }
    fixes nicely ... I promise to pay more attention next time, thanks again.
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    LOL! That's what happens when you make assumptions. Which I have never done...in the last 30 seconds or so.
    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.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Old Pedant showed me how to use it with 'this', and I just used it today.
    Code:
    txts.onmousedown = function(){somefunction(this)}
    and you just run a for loop around it for classes and tags. Works like a champ.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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