4thorder(TM) - Code Snippets and Full Scripts

Counting number of elements and automatically adding form elements

Question:

help please!!! i need a javascript loop to count the # of radiobuttons in my form.... i have made a dynamic test form,
the questions and answers are dynamic. any test can have up to 25 questions,
and each answer can have 4 answers.
i have written code in javascript that calculates the value of the correct radiobutton checked,
and tallies up the score. i set in the form- id="form1"-form100.... in javascript the code looks like this....
function calc(id)
{
var addedValues=0;

for (var j=1; j<=100;j++)----this needs to be {j<='count.variable'}
{
if(id['form'+j].checked==true && id['form'+j].value1 == id['form'+j].value)
{
addedValues+=Number(id['form'+j].value2);
}
}
addedValues=addedValues.toFixed(2);
id.test_score.value='' +addedValues;
}
i need some help to loop through and tell me how many answers(id) are out there,
so i can add that variable to my javascript -- j<=(total number of ids--variable)

any ideas...

Answer:

If you want to count the number of elements on a page you do not have to loop through to do that. Just use collections.

CLICK HERE FOR DEMO HERE

Code:

<HTML>
<HEAD>
<META http-equiv="Content-Language" content="en-us">
<META http-equiv="Content-Type" content="text/html; charset=windows-1252">
<TITLE>Number of Input tags</TITLE>
<SCRIPT>
function countQ()
{
ContainerElement=document.getElementById("container")
RadioCollection=ContainerElement.getElementsByTagName('INPUT');
document.getElementById('inputNO').value=RadioCollection.length
return RadioCollection.length
}
function appendRadioSet()
{
var newName=countQ()/4
ContainerElement=document.getElementById("container")
RadioSet=document.createElement("P");
RadioSet.innerHTML='<INPUT type=radio checked name=R'+newName+'><INPUT type=radio name=R'+newName+'><INPUT type=radio name=R'+newName+'><INPUT type=radio name=R'+newName+'>'
ContainerElement.appendChild(RadioSet)
countQ()
}
</SCRIPT>
</HEAD>
<BODY onload=" countQ()">
<INPUT type="button" onclick="appendRadioSet()" value="Add radio set">
<INPUT type="text" id="inputNO" size="20"> Number of Input tags
<DIV id="container">
<P><INPUT type="radio" checked name="R1"><INPUT type="radio" name="R1"><INPUT type="radio" name="R1"><INPUT type="radio" name="R1"></P>
<P><INPUT type="radio" name="R2"><INPUT type="radio" checked name="R2"><INPUT type="radio" name="R2"><INPUT type="radio" name="R2"></P>
<P><INPUT type="radio" name="R3"><INPUT type="radio" name="R3"><INPUT type="radio" checked name="R3"><INPUT type="radio" name="R3"></P>
<P><INPUT type="radio" name="R4"><INPUT type="radio" name="R4"><INPUT type="radio" name="R4"><INPUT type="radio" checked name="R4"></P>
</DIV>
</BODY>
</HTML>

The rountine "countQ()" is the key to your question. The other routine I just wrote to add more inputs for a count change.

I wrapped the elements in a DIV to isolate the count. That is, the routine will only count the elements within the DIV named "container". That way you can have other elements somewhere on the page (and there are in this case) they wont be counted.

Top of Page