Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old March 31st, 2007, 04:51 AM
Registered User
 
Join Date: Mar 2007
Location: , , Netherlands.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default Eventhandlers on nodes

I would like to create the following
Code:
  fnTest(sId,sTxt) {
    alert(sId + ': ' + sTxt);
  }

  ...

  <a href="#" id="i23" onClick="fnTest(this.id,'Iiyama ProLite E511S')">E511S</a>
If you write it all out in HTML this works fine. I need to create this dynamically, which works fine up to the definition of de onClick event handler:
Code:
  var eA = doc.createElement("a");
  eA.setAttribute("id","d23");
  eA.setAttribute("href","#");
  eA.setAttribute("onClick","fnTest(this.id,'Iiyama ProLite E511S')");
FF executes the code, IE does nothing (but also no error). Another approach would be to attach an eventHandler to the element. I used Nicholas C. Zakas' code and changed the function:
Code:
  fnTest() {
    alert('Testing 123');
  }

  var EventUtil = new Object;
  EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) { // DOM
      oTarget.addEventListener(sEventType, fnHandler, false);
    }
    else if (oTarget.attachEvent) { //IE
      oTarget.attachEvent("on"+sEventType, fnHandler);
    }
    else { // ? what else is there ?
      oTarget["on"+sEventType] = fnHandler;
    }
  };

  var eA = doc.createElement("a");
  eA.setAttribute("id","d23");
  eA.setAttribute("href","#");
  EventUtil.addEventHandler(eA,'click',fnTest);
Executes in both browsers, but now I am unable to pass parameters. So I changed the function to:
Code:
  fnTest() {
    alert(this.id);
  }
FF executes OK, IE7 comes with a box that says: "undefined".

I see one last alternative: innerHTML. I have never worked with it and since it is not a DOM standard, I'd rather not use it. If it can make things work I'd use it, but only if nothing else can.

Anyone any ideas?

Thanks,Erik.
  #2 (permalink)  
Old April 1st, 2007, 04:45 AM
Registered User
 
Join Date: Mar 2007
Location: , , Netherlands.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I already have the answer:
Code:
  eA.onclick = function() { fnTest(this.id,'Iiyama ProLite E511S'); };
Should have thought of that myself.

Erik.


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to value in b/n nodes Swetha XSLT 1 May 20th, 2008 12:20 PM
Merging nodes trishla XSLT 11 October 18th, 2007 03:01 PM
help with nodes/children bmmayer XML 0 July 13th, 2007 05:04 PM
How to select these nodes? hustsay23 XSLT 1 September 7th, 2006 04:15 AM
attach FileWatcher eventhandlers dynamically neethling .NET Framework 1.x 0 January 11th, 2006 10:17 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.