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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

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

Post 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).
Last edited by timvw on Tue Apr 04, 2006 3:08 am, edited 1 time in total.
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post 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');
}
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post 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
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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'); });
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post by timvw »

Thx :) I knew there had to be a way to do it..
Post Reply