someElement.onclick = someFunction: how to pass an argument to function?

JavaScript
1

Hello,

I have this bit of code that is working just fine:


someElement.onclick = someFunction;

When element is clicked, someFunction is fired. Inside someFunction, I have this bit of code:

var theid = this.getAttribute('id');

which retrieves the id of someElement.

So far so good but…

I would like to be able to use someFunction not only as the result of an onclick event. For example, I’d like to use it like that:

someFunction('the-id-hard-typed');

Obviously, it wouldn’t work since someFunction does not receive any argument. So I thought modify my code to like that:


someElement.onclick = someFunction(this.getAttribute('id'));

But… it doesn’t work…

I would like to know how I can pass an argument to someFunction when it is the result of my onlick event so I can also use someFunction() without having to clone it (and change its name slightly) just so it can receive an argument.

I hope my problem is clear so I can get an answer…

2

You can let your function decide if it is being passed a string.

function someFunction(){
    if(typeof arguments[0]=='string'){
        // use the argument as a string
    }
    else{
        // use argument[0](as an event or a 'this' element)
    }
    // more code 
}

or

function someFunction(hoo){
    if(typeof hoo=='string')hoo=document.getElementById(hoo);
    else hoo= hoo? hoo.target : window.event && event.srcElement;
    // more code using element hoo
}
3 
function someFunction(){
    if(typeof arguments[0]=='string'){
        // use the argument as a string
    }
    else{
        // use argument[0](as an event or a 'this' element)
    }
    // more code
}

I’m a bit too… basic to understand that code :slight_smile:

Would it work with the following?

someElement.onclick = someFunction;
someFunction('my-id');

I’m sorry, I don’t get how to call your function :slight_smile:

4

Yes it would. It’s not too difficult to code up a simple test to demonstrates that it works.


<html>
<head>
</head>
<body>
<button id="clickedElement">Click event</button>
<button id="hardCoded">Hard-coded</button>
<script>
function someFunction () {
    var theid;
    if (typeof arguments[0] === 'string') {
        theid = arguments[0];
    } else {
        theid = this.getAttribute('id');
    }
    alert('The id is ' + theid);
}

var someElement = document.getElementById('clickedElement');
someElement.onclick = someFunction;

document.getElementById('hardCoded').onclick = function () {
    someFunction('my-id');
};
</script>
</body>
</html>