Question

I need help with changing a function that is called once the page loads, and anytime afterwards when the user clicks on a certain div with an ID. So far I have this:

window.onload=function() {
//Do your stuff, JS!
}

Yes, I barely know any JS…

EDIT: I will include my JS function (I didn’t make it myself, obviously another nice and smarter person did :P)

    function() {
    var maxHeight = 0;
    //get the column containers
    var colsA = document.getElementById("Content").childNodes;

    //get the height of the tallest column
    for(var i=0; i < colsA.length; i=i+1) {
         if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
    }

 //set all the column containers heights to maxHeight
    for(var i=0; i < colsA.length; i=i+1) {
         if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
    }
} 

What it does: I have a div container that houses x number of column divs. These columns vary at height due to content. This function makes all the divs heights the same.

When my page loads, this code runs flawlessly. However afterwards, it doesn’t. I have some collapsible divs that house extra information, when a user clicks it will push the height further. This is why I thought of an onclick for that id… unfortunately the id is dynamically generated by php.

Answer 1

You can define a function separately and then bind it to multiple event handlers:

function myHandler(){...}
window.onload = myHandler;
myElement.onclick= myHandler;
...