将textarea名称增加到javascript函数

Question

So what I am trying to achieve is to increment the points".$id." in the javascript code below starting from 0 like points+n and it would be a dynamic value according to rows in a table. Same for the value 'button".$id."' and all this is because of styled radiobutton labels that are looped etc. So all I want to do is get rid of all the hardcoded different var txt1 to txt+n, button0 to button+n and points0 to points+n in the JavaScript function. The real problem here for me is the line: var buttons1 = document.forms[0].button0; how to replace the 0 in button0 to the 'i' in a for loop. Someting like button + i won't work.

Oh and what I'm trying to do is get the values from the radiobuttons to a textarea with one buttongroup and textarea per tablerow.

The code below works for the first 7 rows in my table...

echo "
<td>
<div class='radio'> 
<input id='".$temp1."' type='radio' name='button".$id."' onclick='myFunction()' value='4'>  
<label for='".$temp1."'></label>  
<input id='".$temp2."' type='radio' name='button".$id."'  onclick='myFunction()' value='3'>  
<label for='".$temp2."'></label>
<input id='".$temp3."' type='radio' name='button".$id."'  onclick='myFunction()' value='2'>  
<label for='".$temp3."'></label>  
<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction()'  value='1'>  
<label for='".$temp4."'></label>
</div>";
echo"<textarea id='points".$id."' name='points".$id."' cols='1' rows='1' ;>    </textarea>
</td>    
</tr>";

The Javascript function:

 function myFunction() {

 var txt1 ='';
 var txt2 ='';
 var txt3 ='';
 var txt4 ='';
 var txt5 ='';
 var txt6 ='';
 var txt7 ='';

 var buttons1 = document.forms[0].button0;                                                          
 var buttons2 = document.forms[0].button1;
 var buttons3 = document.forms[0].button2;
 var buttons4 = document.forms[0].button3;
 var buttons5 = document.forms[0].button4;
 var buttons6 = document.forms[0].button5;
 var buttons7 = document.forms[0].button6;
 var buttons8 = document.forms[0].button7;

for (var i = 0; i < 4; i++) {
    if (buttons1[i].checked) {
         txt1 = txt1 + buttons1[i].value + " ";
    }
    if (buttons2[i].checked) {
         txt2 = txt2 + buttons2[i].value + " ";
    }
    if (buttons3[i].checked) {
         txt3 = txt3 + buttons3[i].value + " ";
    }
    if (buttons4[i].checked) {
         txt4 = txt4 + buttons4[i].value + " ";
    }
    if (buttons5[i].checked) {
         txt5 = txt5 + buttons5[i].value + " ";
    }
    if (buttons6[i].checked) {
         txt6 = txt6 + buttons6[i].value + " ";
    }
    if (buttons7[i].checked) {
         txt7 = txt7 + buttons7[i].value + " ";
    }

}


 document.getElementById("points0").value = txt1;
 console.log(txt1);
 document.getElementById("points1").value = txt2;
 console.log(txt2);
 document.getElementById("points2").value = txt3;
 console.log(txt3);
 document.getElementById("points3").value = txt4;
 console.log(txt4);
 document.getElementById("points4").value = txt5;
 console.log(txt5);
 document.getElementById("points5").value = txt6;
 console.log(txt6);
 document.getElementById("points6").value = txt7;
 console.log(txt7);

 }

Answer 1

If i understood correctly, Try something like this: change your onclick as following:

<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction(this)'  value='1'>

and change function :

function myFunction(button){
  var name= button.name;
  var id= name.split('button')[1];;
  document.getElementById("points"+id).value = buttons.value +" ";
}