奇怪有关问题，弄明白了你也有收获

奇怪问题，弄明白了你也有收获
想实现点击每个项value= "F "实现相应项目扣分，并显示出对应项的总分
问题：
1。发现function()中k的值总是3，也就是说function中k的值是最后的3而不是
循环依次取得1，2，3

2。还有问题，这段在ie中有扣分结果，在firefox没有结果。不知道为什么

如果想实现功能，这段Js还能怎么写？

请高手指点~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<script src= "js/prototype.js " type= "text/javascript "> </script>
<title> 无标题文档 </title>
</head>

<body>
<form id= "form1 " name= "form1 " method= "post " action= " ">
<div id= "A1 ">
<input type= "radio " name= "a " value= "T " />
<input type= "radio " name= "a " value= "F " />
<input type= "radio " name= "b " value= "T " />
<input type= "radio " name= "b " value= "F " />
<input type= "radio " name= "c " value= "T " />
<input type= "radio " name= "c " value= "F " />
</div>
<div id= "A2 ">
<input type= "radio " name= "d " value= "T " />
<input type= "radio " name= "d " value= "F " />
<input type= "radio " name= "e " value= "T " />
<input type= "radio " name= "e " value= "F " />
<input type= "radio " name= "f " value= "T " />
<input type= "radio " name= "f " value= "F " />
</div>
<div id= "A3 ">
<input type= "radio " name= "g " value= "T " />
<input type= "radio " name= "g " value= "F " />
<input type= "radio " name= "h " value= "T " />
<input type= "radio " name= "h " value= "F " />
<input type= "radio " name= "i " value= "T " />
<input type= "radio " name= "i " value= "F " />
</div>
<br/>
ABC: <span id= "score1 "> 40 </span> DEF: <span id= "score2 "> 10 </span> GHI: <span id= "score3 "> 40 </span>

</form>
</body>
</html>
<script>
var num1=(new Number(40/39)).toFixed(2); //每项分数文件化控制40分共39个
var num2=1; //每项分数操作者培训10分共10个
var num3=(new Number(40/31)).toFixed(2); //每项分数现场审核40分共31个
var i=1;
var j=1;

for(i=1;i <4;i++){
var k=i;
var score=$( "score "+i).innerText;
var div=$( "A "+i)
var children =div.getElementsByTagName( "INPUT ");
for(j=0;j <children.length;j++){
if(children[j].type== "radio "&&children[j].value== "F "){
children[j].onclick=function(){
if($( "score "+k) <0){
score= 0;
}else{
score-=eval( "num "+k);

}
alert(k); //总是k=3 不是依次取得1，2，3
$( "score "+k).innerText=score;

}
}
}
}

</script>

[解决办法]
闭包:

children[j].onclick=function(){
if($( "score "+k) <0){
score= 0;
}else{
score-=eval( "num "+k);
}
alert(k); //总是k=3 不是依次取得1，2，3
$( "score "+k).innerText=score;
}

改成=======>

children[j].onclick=on_click(k);
其中on_click()函数如下:

function on_click(k){
return function(){
if($( "score "+k) <0){
score= 0;
}else{
score-=eval( "num "+k);
}
alert(k); //总是k=3 不是依次取得1，2，3
$( "score "+k).innerText=score;
}
}

[解决办法]
firefox没有innerText...用textContent...
[解决办法]
可以实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<script src= "js/prototype.js " type= "text/javascript "> </script>
<title> 无标题文档 </title>
</head>

<body>
<form id= "form1 " name= "form1 " method= "post " action= " ">
<div id= "A1 ">
ABC:是 <input type= "radio " name= "a " value= "T " />

否  <input type= "radio " name= "a " value= "F " />
是 <input type= "radio " name= "b " value= "T " /> 否  <input type= "radio " name= "b " value= "F " />
是 <input type= "radio " name= "c " value= "T " />
否 <input type= "radio " name= "c " value= "F " />
</div>
<div id= "A2 "> DEF: 是 <input type= "radio " name= "d " value= "T " />
否  <input type= "radio " name= "d " value= "F " />
是 <input type= "radio " name= "e " value= "T " />
否  <input type= "radio " name= "e " value= "F " />
是 <input type= "radio " name= "f " value= "T " /> 否 
<input type= "radio " name= "f " value= "F " />
</div>
<div id= "A3 "> GHI: 是 <input type= "radio " name= "g " value= "T " />
否   <input type= "radio " name= "g " value= "F " />
是 <input type= "radio " name= "h " value= "T " />   否 <input type= "radio " name= "h " value= "F " />
是 <input type= "radio " name= "i " value= "T " />
否 <input type= "radio " name= "i " value= "F " />
</div>
<br/>
ABC: <span id= "score1 "> 40 </span> DEF: <span id= "score2 "> 10 </span> GHI: <span id= "score3 "> 40 </span>
</form>
</body>
</html>
<script>
var hasChecked=false;
function on_click(k){
return function(){
if(hasChecked)return;
var score =$( "score "+k).innerText;
score=score <0?0:score-eval( "num "+k);
$( "score "+k).innerText=score;
}
}
function on_over(obj){
return function(){
if(obj.checked){
hasChecked=true;
}else{
hasChecked=false;
}
}
}

var num1=(new Number(40/39)).toFixed(2); //每项分数文件化控制40分共39个
var num2=1; //每项分数操作者培训10分共10个
var num3=(new Number(40/31)).toFixed(2); //每项分数现场审核40分共31个

for(var i=1;i <4;i++){
var score=$( "score "+i).innerText;
var div=$( "A "+i)
var children =div.getElementsByTagName( "INPUT ");
for(var j=0;j <children.length;j++){
if(children[j].type== "radio "&&children[j].value== "F "){
children[j].onclick=on_click(i);
children[j].onmouseover=on_over(children[j]);
}

}
}
</script>

奇怪有关问题弄明白了你也有收获

热点推荐