Question

我使用在线javascript编写器为个性测验创建我的javascript作为项目工作的一部分，最初我将我的单选按钮作为默认，并且javascript工作。每个单选按钮的值介于1和10之间，对应于预先确定的个性类型。

然而，我更改了单选按钮，以便用户通过css更容易访问并且看起来更好，因此javascript不起作用。希望有人可以找到解决方案吗？当我在safari上运行错误控制台时，它声明它无法找到变量：finish，这是表单上的操作。

单选按钮的自定义CSS：

li{
  color: white;
  display: block;
  position: relative;
  float: left;
  width: 75%;
  height: 25px;
 border-bottom: 0px solid white;
}
li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 20px;
  padding: 25px 0px 25px 60px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: default;
  -webkit-transition: all 0.25s linear;
}

li:hover label{
 color: #ffd061;
}

li .check{
  display: block;
  position: absolute;
  border: 5px solid white;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
 z-index: 5;
 transition: border .25s linear;
 -webkit-transition: border .25s linear;
}

li:hover .check {
  border: 5px solid #ffd061;
}

li .check::before {
  display: block;
  position: absolute;
 content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
 left: 5px;
  margin: auto;
 transition: background 0.25s linear;
 -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #ffd061;
}

input[type=radio]:checked ~ .check::before{
  background: #ffd061;
}


input[type=radio]:checked ~ label{
  color: #ffd061;
}

Javascript

<script>
function finish() {
var results = new Array("none","Part-Of-The-AU","Fresher","Edgy-Anthro-Student","Postgraduate","WannaBNOC","Corporate-Student","General-Course","Rich-Kids","Left-Wing-Social-Activist","Library-Queen");
 var nums = new Array(11);
 for(var i = 0; i < nums.length; i++) nums[i] = 0;
 for(var i = 1; i <= 10; i++) {
  var q = javascript:void(0)document.forms['quiz'].elements['question_'+i];
  if(q[0].type=='checkbox') {
   var n = 0;
  }
  for(var j = 0; j < q.length; j++) {
   if(q[j].checked) {
    var a = q[j].value.split(',');
    for(var k = 0; k < a.length; k++) {
     nums[a[k]]++;
    }
    if(q[j].type=='radio') break;
    else n++;
   }
   if(j == q.length-1&&q[j].type=='radio') {nums[0]++;}
  }
  if(q[0].type=='checkbox'&&((document.forms['quiz'].elements['question_'+i+'_min']&&n<document.forms['quiz'].elements['question_'+i+'_min'].value)||(document.forms['quiz'].elements['question_'+i+'_max']&&n>document.forms['quiz'].elements['question_'+i+'_max'].value))) nums[0]++;
 }
 var j = new Array('0');
 for (i in nums) if(nums[i]>nums[j[0]]){j=new Array(''+i);} else if(nums[i]==nums[j[0]])j[j.length] = i;
 //var o = '';for(var i in results)o+=results[i]+'='+nums[i]+'\n';
 //alert(o);
 if(nums[0]!=0) {
  alert('You missed or incorrectly answered '+nums[0]+' questions!');
 }
 else if(j[0]==0) {
  alert('No result could be determined.');
 }
 else {
  location (results[j[0]]);
 }
}

</script>

单选按钮的新方式：

<ul><li>
<input name="question_1" type="radio" value="10" id="j-option" >
    <label for="j-option">Library Vending Machines</label>
    <span class="check"> </span>
</ul></li>

他们的风格的原始方式：

 <input name="question_1" type="radio" value="10" >Library Vending Machines

表格的开头：

<form name="quiz" action="javascript:finish();">

希望有人能解决这个问题。干杯

Answer 1

问题似乎是这行“var q = javascript：void（0）document.forms ['quiz']。elements ['question _'+ i];”，但我不知道应该是什么。

我的自定义CSS单选按钮在我的javascript中无法识别

1 个答案: