Dynamically adding an onClick event.

Discussion in 'Javascript' started by Daz, Nov 11, 2006.

  1. Daz

    Daz Guest

    Hello everyone. I am sure the answer to my question is simple, but I
    can't seem to dynamically add an onClick event to my script.

    I have a table which is generated dynamically, I am just struggling
    getting an onClick event to show in the HTML source.

    Any help would be appreciated. Here is a block of my current code which
    doesn't work.

    var tr1 = document.createElement('tr');
    tr1.style.backgroundColor = "blue";
    var td1 = document.createElement('td');
    var b = document.createElement('b');
    var titleSpan = document.createElement('span');
    titleSpan.style.color = "white";
    table.appendChild(tr1);
    tr1.appendChild(td1);

    td1.appendChild(b);
    b.appendChild(titleSpan);
    titleSpan.innerHTML = menuTitle;
    titleSpan.onClick = "this.toggle()";

    I am assuming that I am missing something with the syntax?

    All the best.

    Daz.
    Daz, Nov 11, 2006
    #1
    1. Advertising

  2. Daz

    ASM Guest

    Daz a écrit :
    > Hello everyone. I am sure the answer to my question is simple, but I
    > can't seem to dynamically add an onClick event to my script.
    >
    > I have a table which is generated dynamically, I am just struggling
    > getting an onClick event to show in the HTML source.
    >
    > Any help would be appreciated. Here is a block of my current code which
    > doesn't work.


    var tr1 = document.createElement('tr');
    tr1.style.backgroundColor = "blue";
    var td1 = document.createElement('td');
    var titleSpan = document.createElement('span');
    titleSpan.style.color = "white";

    titleSpan.style.fontWeight = "bold";
    titleSpan.onClick = function() {this.toggle(); };
    titleSpan.innerHTML = menuTitle;

    td1.appendChild(titleSpan);
    tr1.appendChild(td1);
    tbody.appendChild(tr1);

    use tbody instead of table
    ..
    ASM, Nov 11, 2006
    #2
    1. Advertising

  3. Daz

    Daz Guest

    ASM wrote:

    > Daz a écrit :
    > > Hello everyone. I am sure the answer to my question is simple, but I
    > > can't seem to dynamically add an onClick event to my script.
    > >
    > > I have a table which is generated dynamically, I am just struggling
    > > getting an onClick event to show in the HTML source.
    > >
    > > Any help would be appreciated. Here is a block of my current code which
    > > doesn't work.

    >
    > var tr1 = document.createElement('tr');
    > tr1.style.backgroundColor = "blue";
    > var td1 = document.createElement('td');
    > var titleSpan = document.createElement('span');
    > titleSpan.style.color = "white";
    >
    > titleSpan.style.fontWeight = "bold";
    > titleSpan.onClick = function() {this.toggle(); };
    > titleSpan.innerHTML = menuTitle;
    >
    > td1.appendChild(titleSpan);
    > tr1.appendChild(td1);
    > tbody.appendChild(tr1);
    >
    > use tbody instead of table
    > .

    Thanks ASM. my table variable is actually a reference to tbody. You're
    right, though. I should have named it tbody and not table.

    I still can't get it to work. For some reason, the toggle function is
    not working at all. I have tried adding the function to the onClick
    event directly, and it still doesn't work... I don't even get an
    error/warning in my JavaScript Console...

    I know it's something I am doing wrong, I just can't figure out what.

    Here is my code. It looks messy because I am trying to figure out how
    things work...

    //********** CODE START **********

    var table = document.getElementById('ctg_table');
    var tableWidth = 80;

    function initPage()
    {
    table.parentNode.style.width = tableWidth + "%";
    displayInputDialog();
    var row1 = new menuItem("test");
    }

    function displayInputDialog()
    {
    var tr = document.createElement('tr');
    tr.setAttribute("id", "rInputDialog");
    tr.style.height = "20%";
    var td = document.createElement('td');
    textarea = document.createElement('textarea');
    textarea.setAttribute("name", "inputDialog");
    textarea.setAttribute("id", "inputDialog");
    textarea.style.width = "100%";
    textarea.style.height = "100%";
    textarea.style.borderStyle = "ridge";
    table.appendChild(tr);
    tr.appendChild(td);
    td.appendChild(textarea);
    }

    function menuItem (menuTitle)
    {
    var tr1 = document.createElement('tr');
    tr1.style.backgroundColor = "blue";
    var td1 = document.createElement('td');
    var b = document.createElement('b');
    var titleSpan = document.createElement('span');
    titleSpan.style.color = "white";
    table.appendChild(tr1);
    tr1.appendChild(td1);
    td1.appendChild(b);
    b.appendChild(titleSpan);
    titleSpan.innerHTML = menuTitle;
    var tr2 = document.createElement('tr');
    var td2 = document.createElement('td');
    table.appendChild(tr2);
    tr2.appendChild(td2);
    tr2.style.borderStyle = 'ridge';
    tr2.style.borderColor = "green";
    td2.innerHTML = 'blah';
    titleSpan.onClick = function()
    {
    var textarea = document.getElementById('inputDialog');
    textarea.value = "blah"
    }
    }

    initPage();

    //************ CODE END ************

    Many thanks for your input.

    If you can offer any more constructive criticism, it would be received
    gracefully as I would rather do this right, than go about it the wrong
    way.

    Daz.
    Daz, Nov 11, 2006
    #3
  4. Daz

    ASM Guest

    Daz a écrit :
    > Thanks ASM. my table variable is actually a reference to tbody. You're
    > right, though. I should have named it tbody and not table.
    >
    > I still can't get it to work. For some reason, the toggle function is
    > not working at all. I have tried adding the function to the onClick
    > event directly, and it still doesn't work... I don't even get an
    > error/warning in my JavaScript Console...
    >
    > I know it's something I am doing wrong, I just can't figure out what.
    >
    > Here is my code. It looks messy because I am trying to figure out how
    > things work...
    >
    > //********** CODE START **********
    >
    > var table = document.getElementById('ctg_table');
    > var tableWidth = 80;
    >
    > function initPage()
    > {
    > table.parentNode.style.width = tableWidth + "%";
    > displayInputDialog();
    > var row1 = new menuItem("test");
    > }
    >
    > function displayInputDialog()
    > {
    > var tr = document.createElement('tr');
    > tr.setAttribute("id", "rInputDialog");
    > tr.style.height = "20%";
    > var td = document.createElement('td');
    > textarea = document.createElement('textarea');


    IE would prefer :
    textarea.name = "inputDialog";
    textarea.id = "inputDialog";

    > textarea.setAttribute("name", "inputDialog");
    > textarea.setAttribute("id", "inputDialog");
    > textarea.style.width = "100%";
    > textarea.style.height = "100%";
    > textarea.style.borderStyle = "ridge";
    > table.appendChild(tr);
    > tr.appendChild(td);
    > td.appendChild(textarea);


    why do you append something to your td not more there ?

    td.appendChild(textarea); // from inside
    tr.appendChild(td); // to outside
    table.appendChild(tr); // boxes

    > }
    >
    > function menuItem (menuTitle)
    > {
    > var tr1 = document.createElement('tr');
    > tr1.style.backgroundColor = "blue";
    > var td1 = document.createElement('td');
    > var b = document.createElement('b');
    > var titleSpan = document.createElement('span');
    > titleSpan.style.color = "white";
    > table.appendChild(tr1);
    > tr1.appendChild(td1);
    > td1.appendChild(b);
    > b.appendChild(titleSpan);
    > titleSpan.innerHTML = menuTitle;
    > var tr2 = document.createElement('tr');
    > var td2 = document.createElement('td');


    Same as I previously said : better to append in right order

    p or span -> td -> tr -> tbody -> table -> body

    > table.appendChild(tr2);
    > tr2.appendChild(td2);
    > tr2.style.borderStyle = 'ridge';
    > tr2.style.borderColor = "green";
    > td2.innerHTML = 'blah';
    > titleSpan.onClick = function()


    perhaps :
    titleSpan.onclick = function()

    > {

    alert('seen');
    > var textarea = document.getElementById('inputDialog');
    > textarea.value = "blah"
    > }
    > }
    >
    > initPage();
    >
    > //************ CODE END ************
    >
    > Many thanks for your input.


    a question : is this table in a form ?
    ASM, Nov 11, 2006
    #4
  5. Daz

    Daz Guest

    ASM wrote:
    > IE would prefer :
    > textarea.name = "inputDialog";
    > textarea.id = "inputDialog";

    Ok, I have changed this in my code. Thanks :)

    I'd just like to point out that I don't have access to Internet
    Explorer, so I am using Firefox. As far as I know it shouldn't be a big
    issue, but I know some things are different between the way that
    Internet Explorer and Firefox process JavaScript, or rather the syntax
    and attributes which should be used.

    > why do you append something to your td not more there ?

    Sorry, I don't understand what you mean. Are you suggesting I use
    innerHTML instead of appending textarea?

    > td.appendChild(textarea); // from inside
    > tr.appendChild(td); // to outside
    > table.appendChild(tr); // boxes

    Ok, I have changed my code to reflect this. It makes more sense doing
    it the way you suggested, although I was simply going by the examples
    by Mark Kahn at
    http://www.htmlgoodies.com/primers/jsp/article.php/3594621

    > Same as I previously said : better to append in right order

    Agreed, and already done.

    > p or span -> td -> tr -> tbody -> table -> body

    There are no body tags in my HTML. Would this make any difference as
    everything goes inside my <tbody>? Everything is displaying correctly,
    it's just this single function that is refusing to fire.

    > perhaps :
    > titleSpan.onclick = function()

    I have tried just doing:
    titleSpan.onClick = function() { alert('blah'); }
    ....and it still won't fire...

    > a question : is this table in a form ?

    No, I'm not, and I don't plan to either. :)

    Here is the code modified following your suggestions. I have included
    the HTML also, in case I have made a stupid mistake.

    //***** CODE START *****

    > /*************
    > * HTML code *
    > ************/


    > <head>
    > <title>Colour Text Generator</title>
    > </head>
    > <table style="width: 100%;">
    > <tbody id="ctg_table">
    > </tbody>
    > </table>
    > <script language="javascript" type="text/javascript" src="text_generator.js"></script>
    > <noscript>
    > You must enabled JavaScript in order to use this page.<br /><br />
    > If you do not have a JavaScript enabled browser, please download Firefox
    > for free from <a href="http://www.getfirefox.com">www.getfirefox.com</a>.
    > </noscript>



    > //******************
    > * JavaScript code *
    > ******************/


    > var tbody = document.getElementById('ctg_table');
    > var tableWidth = 80;
    > var row1 = null;
    > function initPage()
    > {
    > tbody.parentNode.style.width = tableWidth + "%";
    > displayInputDialog();
    > row1 = new menuItem("test");
    > }


    > function displayInputDialog()
    > {
    > var tr = document.createElement('tr');
    > tr.setAttribute("id", "rInputDialog");
    > tr.style.height = "20%";
    > var td = document.createElement('td');
    > var textarea = document.createElement('textarea');
    > textarea.name = "inputDialog";
    > textarea.id = "inputDialog";
    > textarea.style.width = "100%";
    > textarea.style.height = "100%";
    > textarea.style.borderStyle = "ridge";


    > td.appendChild(textarea);
    > tr.appendChild(td);
    > tbody.appendChild(tr);
    > }


    > function menuItem (menuTitle)
    > {
    > var tr1 = document.createElement('tr');
    > tr1.style.backgroundColor = "blue";


    > var td1 = document.createElement('td');


    > var titleSpan = document.createElement('span');
    > titleSpan.style.color = "white";
    > titleSpan.style.fontWeight = "bold";
    > titleSpan.onClick = function() { alert('blah'); }
    > titleSpan.innerHTML = menuTitle;


    > td1.appendChild(titleSpan);
    > tr1.appendChild(td1);
    > tbody.appendChild(tr1);


    > var tr2 = document.createElement('tr');
    > var td2 = document.createElement('td');


    > td2.innerHTML = 'blah';
    > tr2.appendChild(td2);
    > tbody.appendChild(tr2);
    > }


    > initPage();


    //****** CODE END ******

    Many thanks.

    Daz.
    Daz, Nov 11, 2006
    #5
  6. Daz

    Daz Guest

    ASM wrote:
    > a question : is this table in a form ?

    I take that back. Yes, the table IS going to be in a form. Either that,
    or there will be several forms within the table. What made you ask?
    Daz, Nov 11, 2006
    #6
  7. Daz

    VK Guest

    Daz wrote:
    > var titleSpan = document.createElement('span');
    > titleSpan.onClick = "this.toggle()";


    titleSpan implements DOM interface which includes intrinsic [onclick]
    event listener. This listener can be set to a function reference. In
    case of click event the referenced function will be called. So the
    first error: string instead of function reference.
    The second error is that JavaScript is case-sensitive: unlike HTTP tags
    and attribute names This way in your HTML source you use something
    like:
    <SPAN onClick="alert(this)">Text</span>
    but in your JavaScript program the handler has to be named exactly as
    it is: "onclick" (all lower case). Otherwise the program will decide
    that you want to create new property "onClick" and assign a string
    value to it (this is what it's doing). With all necessary corrections
    the line will be:
    titleSpan.onclick = function(){this.toggle();};
    or (to keep the "stringified" approach):
    titleSpan.onclick = new Function("this.toggle();");
    VK, Nov 11, 2006
    #7
  8. Daz

    ASM Guest

    Daz a écrit :
    > ASM wrote:
    >> IE would prefer :
    >> textarea.name = "inputDialog";
    >> textarea.id = "inputDialog";

    > Ok, I have changed this in my code. Thanks :)
    >
    > I'd just like to point out that I don't have access to Internet
    > Explorer,


    Anyway it is better for each browser.

    >> td.appendChild(textarea); // from inside
    >> tr.appendChild(td); // to outside
    >> table.appendChild(tr); // boxes

    > Ok, I have changed my code to reflect this. It makes more sense doing
    > it the way you suggested, although I was simply going by the examples
    > by Mark Kahn at
    > http://www.htmlgoodies.com/primers/jsp/article.php/3594621


    I don't know this Mark :)
    But it seems to me we create elements that are virtual, then we append
    them to their container, so it appears natural to do it from inside box
    to the last outside one.
    (even if modern browsers (FF) can understand what is the sens we adopt).

    >> p or span -> td -> tr -> tbody -> table -> body


    that is to show the design.

    > There are no body tags in my HTML.


    If you have any tbody in your table, or any body in your html, the
    browser will create them (at least in its mind) so you always can use them.

    >> perhaps :
    >> titleSpan.onclick = function()


    > I have tried just doing:


    No you haven't ! did you notice the c in lowercase ?

    > titleSpan.onClick = function() { alert('blah'); }
    > ...and it still won't fire...


    change your onClick in onclick and all will be OK.

    >> a question : is this table in a form ?

    > No, I'm not, and I don't plan to either. :)


    If you use elements of form (input, textarea) you would have set them in
    a form (simplest an cleanest : outside the table)

    --
    ASM
    ASM, Nov 11, 2006
    #8
  9. Daz

    Daz Guest

    ASM wrote:

    > Daz a écrit :
    > > ASM wrote:
    > >> IE would prefer :
    > >> textarea.name = "inputDialog";
    > >> textarea.id = "inputDialog";

    > > Ok, I have changed this in my code. Thanks :)
    > >
    > > I'd just like to point out that I don't have access to Internet
    > > Explorer,

    >
    > Anyway it is better for each browser.
    >
    > >> td.appendChild(textarea); // from inside
    > >> tr.appendChild(td); // to outside
    > >> table.appendChild(tr); // boxes

    > > Ok, I have changed my code to reflect this. It makes more sense doing
    > > it the way you suggested, although I was simply going by the examples
    > > by Mark Kahn at
    > > http://www.htmlgoodies.com/primers/jsp/article.php/3594621

    >
    > I don't know this Mark :)
    > But it seems to me we create elements that are virtual, then we append
    > them to their container, so it appears natural to do it from inside box
    > to the last outside one.
    > (even if modern browsers (FF) can understand what is the sens we adopt).
    >
    > >> p or span -> td -> tr -> tbody -> table -> body

    >
    > that is to show the design.
    >
    > > There are no body tags in my HTML.

    >
    > If you have any tbody in your table, or any body in your html, the
    > browser will create them (at least in its mind) so you always can use them.
    >
    > >> perhaps :
    > >> titleSpan.onclick = function()

    >
    > > I have tried just doing:

    >
    > No you haven't ! did you notice the c in lowercase ?
    >
    > > titleSpan.onClick = function() { alert('blah'); }
    > > ...and it still won't fire...

    >
    > change your onClick in onclick and all will be OK.
    >
    > >> a question : is this table in a form ?

    > > No, I'm not, and I don't plan to either. :)

    >
    > If you use elements of form (input, textarea) you would have set them in
    > a form (simplest an cleanest : outside the table)
    >
    > --
    > ASM

    Brilliant! onClick has been changed to onclick and now it's functioning
    perfectly. Many thanks for your input. I have seen it as onClick on
    many online examples. I am not sure why this might be, however, I now
    know to use onclick. :)
    Daz, Nov 11, 2006
    #9
  10. Daz

    Daz Guest

    VK wrote:

    > Daz wrote:
    > > var titleSpan = document.createElement('span');
    > > titleSpan.onClick = "this.toggle()";

    >
    > titleSpan implements DOM interface which includes intrinsic [onclick]
    > event listener. This listener can be set to a function reference. In
    > case of click event the referenced function will be called. So the
    > first error: string instead of function reference.
    > The second error is that JavaScript is case-sensitive: unlike HTTP tags
    > and attribute names This way in your HTML source you use something
    > like:
    > <SPAN onClick="alert(this)">Text</span>
    > but in your JavaScript program the handler has to be named exactly as
    > it is: "onclick" (all lower case). Otherwise the program will decide
    > that you want to create new property "onClick" and assign a string
    > value to it (this is what it's doing). With all necessary corrections
    > the line will be:
    > titleSpan.onclick = function(){this.toggle();};
    > or (to keep the "stringified" approach):
    > titleSpan.onclick = new Function("this.toggle();");


    Fantastic Explanation! Many thanks. :)
    Daz, Nov 11, 2006
    #10
  11. Daz

    Daz Guest

    Good Man wrote:

    > "Daz" <> wrote in news:1163250979.382213.122970
    > @b28g2000cwb.googlegroups.com:
    >
    > > Hello everyone. I am sure the answer to my question is simple, but I
    > > can't seem to dynamically add an onClick event to my script.
    > >
    > > I have a table which is generated dynamically, I am just struggling
    > > getting an onClick event to show in the HTML source.

    >
    > Two things. First, nothing dynamically generated will show up in your
    > source code. The source code is the document as rendered when
    > downloaded from the server. You *will* be able to see the changes in
    > the DOM structure using Firefox and its DOM-inspector (ctrl-shift-i) or
    > the Firebug addon.

    I use the Web Developers plugin which shows me the 'generated' source.
    It is by far the best plugin I have ever install with Firefox. For some
    reason the DOM inspector doesn't work. There is a shortcut to it from
    within one of the menus in my WDtk, but it does nothing. Also
    CTRL+SHIFT+I does nothing for me either. Bizarre...
    >
    > Secondly, setting onclick (or any 'on') event to a script created DOM
    > element is a little tricky. You have to do it via a function.
    >
    > http://p2p.wrox.com/topic.asp?TOPIC_ID=34541 (second post on the screen,
    > followup by OP)
    >
    > see ya

    Great. Thanks for your help. :)
    Daz, Nov 11, 2006
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. pbd22
    Replies:
    1
    Views:
    1,005
    bruce barker
    Oct 24, 2007
  2. pbd22
    Replies:
    4
    Views:
    1,200
    pbd22
    Oct 24, 2007
  3. Frank
    Replies:
    2
    Views:
    412
    Victor Garcia Aprea [MVP]
    Nov 26, 2003
  4. Michael Hill

    Adding onclick to TR element dynamically

    Michael Hill, Jan 23, 2004, in forum: Javascript
    Replies:
    4
    Views:
    128
    Martin Honnen
    Jan 24, 2004
  5. RobG
    Replies:
    2
    Views:
    172
Loading...

Share This Page