Assigning a function to an event

mega · November 16th, 2005, 11:42 PM

Hi all.

Does anyone have any clue to why this piece of code won't work? It worked for like 2 seconds and then it just stopped working!? I've tried to get it to work for 2 hours in vain. It's supposed to add a function to an elements onclick event.

Code:

/* assign a function to an elements onclick event
by ID and execute the function */
function assignFunctionToId(idName, new_function)
{
  var elm = document.getElementById(idName);
  try {
    elm.onclick = function()
    {
      // evaluate function code
      eval(new_function);
    }
  }
  catch(ex) {
    alert(ex.toString());
  }
}

I also tried with this approach:

Code:

function assignFunctionToId(idName, new_function)
{
  var elms = document.getElementById(idName);
  for (var i = 0; i < elms.length; i++) {
    (function () {
      elms[i].onclick = function () {
    eval(new_function);
      }        
    })();
}

The code I try to add is this:

Code:

/* shows/hides an element by id */
function showhide(myId)
{
  try {
    var state = document.getElementById(myId).style.visibility
    alert(state);
    //alert(document.getElementById(myId) + " state = " + state);
    if (state == 'hidden') {
      document.getElementById(myId).style.visibility = 'visible';
    }
    else {
      document.getElementById(myId).style.visibility = 'hidden';
    }
  }
  catch(ex) {
    alert(ex);
  }
}

The code runs once. I know this because the element correctly hides or show when the page has loaded. The code is assign to window.onload like this:

Code:

window.onload = function()
{
  assignFunctionToId("selLanguage", showhide("languageTOC"));
}

This is my XHTML:

Code:

<h5><a href="#language" id="selLanguage" title="cambio idioma/change language">Cambio idioma<br />Change language</a></h5>
<ul id="languageTOC">
  <li><a href="#" title="">EspaÃ±ol</a></li>
  <li><a href="#" title="View the english version of the website">English</a></li>
</ul>

Thanks in advance - I could really use the help!

Regards, Jon.

- mega
Moving to C# .NET

ChrisScott · November 17th, 2005, 07:49 AM

Hi Jon,

This should do the trick...

Code:

window.onload = function()
{
  document.getElementById("selLanguage").onclick = new Function("showhide('languageTOC')");
}

HTH,

Chris

mega · November 21st, 2005, 06:58 PM

Thanks Chris but I found another way:

Code:

/* assign a function to an
 elements event by ID */
function addEvent(oEl, sEvent, sFunction, useCapture) {  
    if (oEl) {
      if (oEl.addEventListener) { // W3C
       oEl.addEventListener(sEvent,sFunction,useCapture);
       return true;
      } else if (oEl.attachEvent) { // Microsoft
       var r = oEl.attachEvent("on"+sEvent,sFunction);
       return r;
      }
    }
}
window.onload = function()
{ 
    var objSelLanguage = document.getElementById("selLanguage");
    if (objSelLanguage) {
        addEvent (objSelLanguage, "click", function() { return showhide("languageTOC") }, false);
    }
}

also I've read that the Function constructor is in many JavaScript implementations less efficient than the

Code:

funtion(x) { return whatever; }

but I think I will use your suggestion in a catch section of addEvent in case addEventListener or attachEvent fails.
- mega
Moving to C# .NET