Javascript pass parameter to function

Question

i try to pass paramater to function. When i click the div it will alert the paramater that i pass

i have 2 file

index.html
script.js

here's what i try

Example 1

index.html

<div id="thediv" >

script.js

window.onload = initialize;

    //bind event listener
        function initialize(){
             document.getElementById("thediv").onclick = myFunction(" something ");
        }
    //end of bind

    //function
        function myFunction(parameter) { alert( parameter ) };
    //end of all function

the trouble is the function its executed without click

Example 2

index.html

<div id="thediv" onclick="myfunction('something')" >

script.js

function myFunction(parameter) { alert( parameter ) };

yap its done with this but the trouble if i have many element in index.html it will painful to read which element have which listener
i want to separate my code into 3 section (similiar with example1)
- the view(html element)
- the element have which listener
- the function

what should i do? or can i do this? (i don't want to use another library)

Did you include the .js file? If you put an alert in the script.js, does it pop up? — Jens Egholm
– Jens Egholm, Commented Nov 21, 2013 at 10:14

Quentin · Accepted Answer · 2013-11-21 10:15:10Z

3

Placing () (with any number of arguments in it) will call a function. The return value (undefined in this case) will then be assigned as the event handler.

If you want to assign a function, then you need to pass the function itself.

...onclick = myFunction;

If you want to give it arguments when it is called, then the easiest way is to create a new function and assign that.

...onclick = function () {
        myFunction("arguments");
    };

answered Nov 21, 2013 at 10:15

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ilike Over a year ago

thanks it good explanation. so if i want to pass argument, and want to separate the script and the element to make it more readable, the best thing i can do is your second code in my js file?

Moumit · Accepted Answer · 2013-11-21 10:16:59Z

2

Your first solution logic is absolutely ok .. just need to assign a delegate ... what you are doing is calling the function .. So do something like this ...

//bind event listener
        function initialize(){
             document.getElementById("thediv").onclick = function () { myFunction(" something "); };    
        }
//end of bind

answered Nov 21, 2013 at 10:16

Moumit

9,8609 gold badges59 silver badges66 bronze badges

Comments

Sarath · Accepted Answer · 2013-11-21 10:15:23Z

2

Instead of assign you invoke a function with myFunction(); Use it like this

//bind event listener
 function initialize(){
    document.getElementById("thediv").onclick = function(){
         myFunction(" something ");
   }
 }

answered Nov 21, 2013 at 10:15

Sarath

9,17612 gold badges55 silver badges86 bronze badges

Collectives™ on Stack Overflow

Javascript pass parameter to function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related