updating a variable onclick

[slash_gnr3k]

i have a file which includes php and javascript. here is my javascript:

	<script language="JavaScript">

		function AddToIngList (form)
		{

			var Ingredient = form.ingredienttoadd.value;
			form.ingredients_added.value += Ingredient + "\n";

			var objHTML, objText, objinput;

			objHTML = document.createElement('P');

			objHTML.setAttribute('NAME', 'txtTest');
			objHTML.setAttribute('ID', 'txtTest');
   
			var strTest = form.ingredienttoadd.value;
  			objText = document.createTextNode(strTest);

			objinput = document.createElement
('INPUT');
		
			objinput.name = "input"
			objinput.value = "";

			document.body.appendChild(objHTML);
		
			objHTML.appendChild(objText);
			objHTML.appendChild(objinput);


		
		}
	</script>

this function is called here:

                echo"<input type=\"button\" name=\"button\" Value=\"add\" onClick=\"AddToIngList(this.form)\">"; 

which is a submit button (generated by php for reasons i wont go into here)

so basically everytime someone clicks "button" a new input box is created with the name "input". obviously i want each box to have a unique name which is where my problem lies. is there a way that i can call the newly created input box "input1" and then on the next click, since input1 already exists call it "input2"?
etc...
can anyone help?
thanks

[7stud]

You can attach a custom property to the function itself(since functions are objects in js):

if(!AddToIngList.count) AddtoIngList.count = 0;
++AddtoIngList.count;

[slash_gnr3k]

i dont understand. where would i write that? in the onclick line?

[7stud]

i want each box to have a unique name which is where my problem lies. is there a way that i can call the newly created input box "input1" and then on the next click, since input1 already exists call it "input2"?

i dont understand. where would i write that?

Where do you name your elements?

The simplest way is to declare a global variable(i.e. outside any function definitions):

var count = 0;

and then inside your function increment its value:

function AddToIngList (form)
{
      //code

     objectinput.name = "input" + ++count;

     //code
}

A more clever way is to do it like this:

function AddToIngList (form)
{
      //code

     if(!AddToIngList.count) AddtoIngList.count = 1;  //if doesn't already exist, creates a variable named 'count'
                                                                 // and attaches it to the function name
     objectinput.name = "input" + addToIngList.count++;

     //code
}

[Leoj00]

7Stud, you sound like u could help me make something that counts up clicks and records them on a server. I think I need javascript like your example to count up... Could you please look at my thread?

http://www.sitepoint.com/forums/showthread.php?t=464945