如何在文本字段中循环Js函数和事件？

Question

I've problem to loop textfield with event onfocus() and onblur(). In single row, that event can running correctly, but if I try to make two rows with for looping in the textfield, that event on the textfield can't running.

I need solution about this problem, thanks

<script type="text/javascript">
function startCalc() {
    interval=setInterval("calc()",1);
}

function calc() {

    var obj=document.hitung;
    var one=obj.sks.value;

        if(one == 2)
            { var hsks = 14; }
        else if(one == 4)
            { var hsks = 28; }
        else
            { var hsks = 0; }
    obj.n_pertemuan.value=(hsks);
}       

function stopCalc() {
    clearInterval(interval);
}
</script>

<center>
<form name="hitung">
<?php 
    for($x = 1; $x <= 2; $x++)
    {
?>
  <table width="205" border="1" cellspacing="0" cellpadding="2">
    <tr>
      <td height="44" colspan="2" align="center">Js Coba</td>
    </tr>
    <tr>
    <td width="84" align="center">SKS</td>
    <td width="113" align="center">PERTEMUAN</td>
  </tr>

  <tr>
    <td align="center"><input name="sks" type="text" onFocus="startCalc();" onBlur="stopCalc();" size="5"/></td>
    <td align="center"><input name="n_pertemuan" type="text" size="5" ></td>

  </tr>
</table>
<?php } ?>
</form>
</center>

Answer 1

Here i will point out some of the mistakes you have made:

when you create three or more table this statement

var one = obj.sks.value;

when you have more text fields it will return error,cause then it will act like an array like object .So you have to iterate over them to get their values.Better use getElementsByName method.I have made some changes to make things clear.First swap the event handlers to have a better control over your programme or it will run madness ,as you are using setinterval after each milisecond.

<input name="sks" type="text" onBlur="startCalc();" onFocus="stopCalc();" size="5"/>

and i've also changed your startClac function

var obj, one, interval;

function startCalc(){
    obj=document.hitung;
    one=document.getElementsByName('sks');

    for(i=0;i<one.length;i++){
        (function(val){
             if(one[val].value !=""){
                 interval=setInterval(function (){
                 calc(one[val].value);
                 },1000);
             }
        })(i);
    }
}

better declare obj,one and interval variable outside startCalc to have better control.

Use getElementsByName method to get hold of every input having name 'sks'.Iterate over them to check for their values.It will create a closure related problem so i suggest use a immediately invoked function to keep the vlaue of i as it is ,unless it will be greater than your actual number of text field and you will lost track of it.

if you want to keep your code omit the value property from one variable as it is a nodelist and nodelist has no value property .It only has length property.inside startCalc() function write

 one = obj.sks;
 output = obj.n_pertemuan;

Keep obj,one and output variable out of calc() function's scope.Here is the modifications you must make inside calc() function and keep the rest unchanged.

for(i=0;i<one.length;i++){
    (function(val){

        if(one[val].value == 2)
            { var hsks = 14; }
        else if(one[val].value == 4)
            { var hsks = 28; }
        else
            { var hsks = 10; }
        output[val].value=hsks;
        console.log(output[val].value);
    })(i);
}