How to dynamically assign function arguments in for loop

Hi Experts,

I have a series of buttons and want to dynamically assign their onclick functionality in a for loop within java script.  The onclick event should simply call a function.  I would like the index of the loop to be used as an argument to the function.  

The behavior I'm noticing is that the argument is the same for all buttons.  How do I assign them a unique value?  I feel like this is some java script variable scope issue.  My understanding is that there isn't scope in java script, which I think is contributing to the problem.

Please see the attached code snippet.  This is a simple html page that exhibits the problem behavior.  I understand it will run in IE and not firefox, but that is okay as the application I'm working on only uses IE.  I have even tried using an array to define a new Number object for each iteration of the loop, but this gives me undefined arguments.

Any advice, insight, or improvements are appreciated!  

I've been struggling with this for much longer than I should have now so I figured I would ask some other experts.  

Thanks!


<html>
<head>
 
<script FOR=window EVENT=onload LANGUAGE="javascript">
 
for(var i = 1; i < 5; i++)
{
var test = i;
var oButton = document.getElementById("test"+i);
oButton.onclick = function(){testFunction(test);};
}
 
</script>
 
<script type="text/javascript">
function testFunction(iNum)
{
alert(iNum);
}
</script>
 
 
 
</head>
<body>
 
<form>
<input id="test1" type="button" 
value="test1">
<input id="test2" type="button" 
value="test2">
<input id="test3" type="button" 
value="test3">
<input id="test4" type="button" 
value="test4">
 
</form>
 
</body>
</html>

Open in new window

LVL 3
Repus024Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Repus024Author Commented:
A colleague of mine discovered a solution to this issue.  The solution is to create a property on the button object to store the argument.  Please see the attached code snippet for the solution in action
<html>
<head>
 
<script FOR=window EVENT=onload LANGUAGE="javascript">
 
for(var i = 1; i < 5; i++)
{
var oButton = document.getElementById("test"+i);
oButton.number = i;
oButton.onclick = function(){testFunction(this.number);};
}
 
</script>
 
<script type="text/javascript">
function testFunction(iNum)
{
alert(iNum);
}
</script>
 
 
 
</head>
<body>
 
<form>
<input id="test1" type="button" 
value="test1">
<input id="test2" type="button" 
value="test2">
<input id="test3" type="button" 
value="test3">
<input id="test4" type="button" 
value="test4">
 
</form>
 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Albert Van HalenAnalyst developerCommented:
Is it the number that want to pass to the function?
If so, this number is also in the id attribute of the element ie test1.

You could also assign a custom attribute to the input element and use that. (see code)
<script FOR=window EVENT=onload LANGUAGE="javascript">
 
for(var i = 1; i < 5; i++)
{
var test = i;
var oButton = document.getElementById("test"+i);
oButton.CustomValue = someValue;
oButton.onclick = function(){testFunction(this);};
}
 
function testFunction(el)
{
alert(el.CustomValue);
}
 
</script>

Open in new window

0
Repus024Author Commented:
The custom attribute is exactly the solution I used.  Please see my comment on the original question.

Thanks for your solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.