奇怪问题，弄明白了你也有收获
想实现点击每个项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>
