Question

I want to bind a click event to every <p> but it does not seem to work properly.

When I run the script I instantly get three alerts. I only want to get them when clicking any of the three <p>'s.

Can anyone tell me what I’m doing wrong?

Edit: Sry this is what it looks like.
The HTML is just as it should: <p class="special">text text text</p> etc

(function () {
    var myFunction = function (theP) {
            alert(theP.id)          
        }


    window.onload = function () {           
        var pTags = document.getElementsByTagName('p'),
            pLength = pTags.length,
            i;

        for (i = 0; i < pLength; i += 1) {
            if(pTags[i].className == 'special'){

                pTags[i].onClick = myFunction(pTags[i]);

            }
        };
    }
})();

Ps. I cannot use jQuery atm

Answer 1

Thanks for all answers. Much appreciated!
I rewrote my own script and solved it like this:
How does that look?

(function () {
    var myFunction1 = function (theP) {
            theP.onclick = myFunction2;
        },

        myFunction2 = function(){
            alert('hello world')
        }


    window.onload = function () {           
        var pTags = document.getElementsByTagName('p'),
            pLength = pTags.length,
            i;

        for (i = 0; i < pLength; i += 1) {
            if(pTags[i].className == 'special'){
                myFunction1(pTags[i]);
            }
        }
    }
})();