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>
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);
}