JavaScript dynamic parameters

Question

I have following code (html,js,jquery) snippet (http://jsfiddle.net/MUScJ/2/):

<script type="text/javascript">
    function someFunc(){
    html = '';
    z = 1;
    for(i=0; i<5; i++){
        html += '<input type="button" value="Button_'+z+'"' +
                'onclick="otherFunc(z);">';
         z++;
    }

    $("#container").html(html);

   return true;
}

function otherFunc(z){
    alert('z:' + z);

     return true;   
}

</script>   

<div id="container"></div>
<input type="button" value="Go" onclick="someFunc();" />

This script outputs five buttons with onclick event. JS function otherFunc always returns z variable equal to 6. Is it possible to overcome this ? I want every button have its specific z value - 1,2,3.. and etc.

Any ideas ?

Jayendra · Accepted Answer · 2011-11-07 19:23:44Z

3

Updated demo - http://jsfiddle.net/MUScJ/4/

Updated code -

    html += '<input type="button" value="Button_'+z+'"' +
            'onclick="otherFunc('+z+');">';

answered Nov 7, 2011 at 19:23

Jayendra

52.8k4 gold badges83 silver badges90 bronze badges

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

Comments

ValeriiVasin · Accepted Answer · 2011-11-07 19:23:06Z

2

You are using string instead of param :) This is your updated example.

But try to replace onclick by jquery bind. Onclick is strongly not recommended for usage :)

answered Nov 7, 2011 at 19:23

ValeriiVasin

8,73611 gold badges60 silver badges79 bronze badges

Comments

Matt Greer · Accepted Answer · 2011-11-07 19:25:38Z

1

Since you did not use var, your z variable is global. This is bad news for many reasons. But in your case, your onclick is calling otherFunc(z), where z is the global z which gets its final value of 6.

One possible fix is to change the html you generate:

var z = 1;
var html = '';
for(var i=0; i<5; i++){
    html += '<input type="button" value="Button_'+z+'"' +
            'onclick="otherFunc(' + z + ');">';
     z++;
}

This is the simplest way to fix it, however you're not really taking advantage of the power that jQuery gives you.

answered Nov 7, 2011 at 19:25

Matt Greer

62.1k18 gold badges127 silver badges124 bronze badges

Comments

Tadeck · Accepted Answer · 2011-11-07 19:27:02Z

1

Yes, change this:

html += '<input type="button" value="Button_'+z+'"' +
    'onclick="otherFunc(z);">';

into this:

html += '<input type="button" value="Button_' + z + '"' +
    'onclick="otherFunc(' + z + ');">';

This issue is a result of the fact you iterate by incrementing z, but create code that uses z (whatever the value will be when invoked after creation - in this case it is 6) instead of using z to create static code (entering the value in the time of HTML creation).

answered Nov 7, 2011 at 19:27

Tadeck

138k28 gold badges155 silver badges201 bronze badges

Comments

megas · Accepted Answer · 2011-11-07 19:43:17Z

0

<script type="text/javascript">
function someFunc(){
    html = '';
    z = 1;
    for(i=0; i<5; i++){
        html += '<input type="button" value="Button_'+z+'"' +
                'onclick="otherFunc(z);">';
         z++;
    }

    $("#container").html(html);

   return true;
}


function otherFunc(z) {
    return function() {
        alert('z:' + z);
    };
}

</script>    

<div id="container"></div>
<input type="button" value="Go" onclick="someFunc();" />

answered Nov 7, 2011 at 19:43

megas

21.9k12 gold badges84 silver badges134 bronze badges

Collectives™ on Stack Overflow

JavaScript dynamic parameters

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related