how to count the number of Elements

[marmachine]

Hi all,I'm new to javascript, so i came accross "the next new thing"...I have a form, dynamicly build by a php script, containing one or several textfields with a name/id like "BESTELLING[sUBTOTAAL][#]" where the # is a unique number, in a range starting at 1. Also there is a hiddenfield with the name/id "regels" which holds the exact number of fields, if this field has value 3, there are 3 textfields numbered from 1 to 3.Now what i want to do is to write the total amount from all these textfields with the following code, though.. there must be something wrong here?

<script type="text/javascript">var regels=document.getElementById("regels").value;var total=0;	  for (var i=0;i<regels;i++)  {  var subtotaal = (document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);  var total = (total += subtotaal);  }document.write("total: " + total);</script>

[Ingolme]

You shouldn't use the var keyword inside a loop. It redeclares the variable. The var keyword brings a variable into existence. If you use it more than once on the same variable it doesn't make sense.Just to be save, I'd make sure that your value is actually a number before operating with it.

var subtotaal,total = 0;for (var i=0;i<regels;i++) {  subtotaal = Number(document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);  total += subtotaal;}

You don't need parenthesis around the expressions that follow an =. And the += already takes care of putting the summed value to the left of the operator so you don't need to assign it to the variable again.

[marmachine]

You shouldn't use the var keyword inside a loop. It redeclares the variable. The var keyword brings a variable into existence. If you use it more than once on the same variable it doesn't make sense.Just to be save, I'd make sure that your value is actually a number before operating with it.

var subtotaal,total = 0;for (var i=0;i<regels;i++) {  subtotaal = Number(document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);  total += subtotaal;}

You don't need parenthesis around the expressions that follow an =. And the += already takes care of putting the summed value to the left of the operator so you don't need to assign it to the variable again.

Thanks for you post and hints Ingolme!After a quick test i still get the "Object required" error on this line: subtotaal = Number(document.getElementById("BESTELLING[sUBTOTAAL][" + i + "]").value);What am i missing here? I'm sure there is a textfield assigned with the name/id = "BESTELLING[sUBTOTAAL][1]"

<script type="text/javascript">var regels=document.getElementById("regels").value;	  var subtotaal,total = 0;for (var i=0;i<regels;i++) {  subtotaal = Number(document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);  total += subtotaal;}document.write("total: " + total);</script>

[jeffman]

Since you are using document.write, I can only assume that this script is executing while the document loads. If the script is located above the element, then the element does not in fact exist, because the text that creates the element has not yet been read.Put the script below the element, or put those statements in a function, and bind the function to window.onload(And you might consider NOT using document.write)

[marmachine]

Since you are using document.write, I can only assume that this script is executing while the document loads. If the script is located above the element, then the element does not in fact exist, because the text that creates the element has not yet been read.Put the script below the element, or put those statements in a function, and bind the function to window.onload(And you might consider NOT using document.write)

okay, taking this to the next step, i have done this...in the "head" of the page i've set the following function:(basicly the code as described earlier, but instead of the document.write, i've put a call to a function which should print the result)

<script type="text/javascript">function berekentotaal()  {  var regels=document.getElementById("regels").value;	    var subtotaal,total = 0;  for (var i=0;i<regels;i++) {	subtotaal = Number(document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);	total += subtotaal;	}  printtotaal(totaal);  }</script>

then on the line (in the body) where i want the result to be written, i've put the next code

<script type="text/javascript">// then the function which should write the result of the function in the "head"function printtotaal(totaal)  {  document.write("totaal: " + total);  }</script>

Still i'm getting the "Object required" error on this line: subtotaal = Number(document.getElementById("BESTELLING[sUBTOTAAL][" + i + "]").value);FF says this line is NULL!Also, when i set <body onLoad="java script:someotherfunction(); java script:berekentotaal();"> FF says that var regels=document.getElementById("regels").value; is NULL, so i figured that i better call the function from the bottom of the body. Probably because PHP is still writing the html/values when the function is called at onload, so setting the following at the end of the body solved this error:

<script type="text/javascript">berekentotaal();  </script>

Still i'm stuck with the other one in the javascript function in the head! (subtotaal = Number(document.getElementById("BESTELLING[sUBTOTAAL][" + i + "]").value); is NULL)Asured that the textfield with id="BESTELLING[sUBTOTAAL][1]" exists, it's value is in example "160.00", no output is written.Do you have any suggestions on this one?p.s.: my intention is to be able to (re)calculate by calling the function berekentotaal(), like when a onkeyup event triggers, the total amount will be recalculated and written without a page refresh/reload.

[dsonesuk]

BUT! you are still using document write, don't use it at all.use an element with id ref and use innerHTML to place the value within it

 function berekentotaal()  {  var regels=document.getElementById("regels").value;	    var subtotaal,total = 0;  for (var i=0;i<regels;i++) {	subtotaal = Number(document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);	total += subtotaal;	}  document.getElementById("showTotal").innerHTML=total;  }

<div id="showTotal"></div>

the calling of the function should be placed below the input fields AND the showTotal div OR better still, use window.onload=function(){berekentotaal();} within head

<script type="text/javascript">function berekentotaal()  {  var regels=document.getElementById("regels").value;	    var subtotaal,total = 0;  for (var i=0;i<regels;i++) {	subtotaal = Number(document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);	total += subtotaal;	}  document.getElementById("showTotal").innerHTML=total;  }window.onload=function(){berekentotaal();}</script>

The other problem IS, you say "a name/id like "BESTELLING[sUBTOTAAL][#]" where the # is a unique number, in a range starting at 1" , BUT you start searching for element with id="BESTELLING[sUBTOTAAL][0]" within the for loop, therefore it won't find this, and give an error.

[marmachine]

BUT! you are still using document write, on use it at all.use an element with id ref and use innerHTML to place the value within itthe calling of the function should be placed below the input fields AND the showTotal div OR better still, use window.onload=function(){berekentotaal();} within headThe other problem IS, you say "a name/id like "BESTELLING[sUBTOTAAL][#]" where the # is a unique number, in a range starting at 1" , BUT you start searching for element with id="BESTELLING[sUBTOTAAL][0]" within the for loop, therefore it won't find this, and give an error.

Thanks Dsonesuk, that did the trick... i've changed the for loop to a while loop and found a minor spelling issue... but it's now running perfectly!

<script type="text/javascript">function berekentotaal()  {  var regels = Number(document.getElementById("regels").value);	      var subtotaal = 0;  var total = 0;  var i = 0;    while (i < regels) {  i++;  subtotaal = Number(document.getElementById("BESTELLING[SUBTOTAAL][" + i + "]").value);  total += subtotaal;  }   // show totalamount  document.getElementById("showTotal").innerHTML=("€ " + total);  }</script>

[dsonesuk]

you could have just changed for loop to for (var i=1;i<=regels;i++)