Page 1 of 1

[SolvedJS: use reference to function (with param(s)) as para

Posted: Mon Apr 03, 2006 3:59 pm
by timvw
Hi, i'm playing with a bit of JavaScript...

Code: Select all

function addEvent(obj, evType, fn) {
        if (obj.addEventListener) {
                obj.addEventListener(evType, fn, false);
                return true;
        } else if (obj.attachEvent) {
                return obj.attachEvent('on' + evType, fn);
        } else {
                return false;
        }
}

function change(element){
        var e = document.getElementById(element);
        if (e.style.display == 'none') {
                e.style.display = '';
        } else {
                e.style.display = 'none';
        }
}

function hide(){
        document.getElementById('pageoptions').style.display = 'none';
}

addEvent(window, 'load', hide);
addEvent(document.getElementById('pageoptionsbutton'), 'change', change('pageoptions'));
The problem is that the second addEvent doesn't seem to work.. So i wonder how i can pass a reference to the change function (with it's parameter).

Posted: Mon Apr 03, 2006 4:07 pm
by timvw
Apparently i'm having a problem with the fact that the element is not found...

Code: Select all

addEvent(window, 'load', hide);

var e = document.getElementById('pageoptionsbutton');
if (e) {
        addEvent(e, 'Click', change('pageoptions'));
} else {
       alert('not found');
}

Posted: Mon Apr 03, 2006 6:27 pm
by timvw
I discovered Yahoo! UI Library: Event and solved my problem as following

(for the time being, demo up and running. Simply click the options button)

Code: Select all

function toggleDisplay(obj, elementID){
 // lookup the element with the given ID
 var e = document.getElementById(elementID);
 // switch from none to ‘’ and vice-versa
 if (e.style.display == ‘none’) {
  e.style.display = ‘’;
  } else {
  e.style.display = ‘none’;
 }
}

function load(){
 // hide the pageoptions div
 document.getElementById(‘pageoptions’).style.display = ‘none’;
 // call toggleDisplay(event, ‘pageoptions’) when pageoptionsbutton is clicked
 YAHOO.util.Event.addListener(document.getElementById(‘button’), ‘click’, toggleDisplay, ‘pageoptions’);
}

// run the load function when the onload event occurs
YAHOO.util.Event.addListener(window, ‘load’, load);

feyd | fixed link

Posted: Tue Apr 04, 2006 2:43 am
by Weirdan
In straight JS (without external libraries) you could do that using closure:

Code: Select all

function addEvent(obj, evType, fn) {
        if (obj.addEventListener) {
                obj.addEventListener(evType, fn, false);
                return true;
        } else if (obj.attachEvent) {
                return obj.attachEvent('on' + evType, fn);
        } else {
                return false;
        }
}

function change(element){
        var e = document.getElementById(element);
        if (e.style.display == 'none') {
                e.style.display = '';
        } else {
                e.style.display = 'none';
        }
}

addEvent(window, 'load', function(e) {
        document.getElementById('pageoptions').style.display = 'none';
});

addEvent(document.getElementById('pageoptionsbutton'), 'change', function(e) { change('pageoptions'); });

Posted: Tue Apr 04, 2006 3:08 am
by timvw
Thx :) I knew there had to be a way to do it..