0

我正在创建一个类似调查的页面。我使用了三个基本的 javascript 函数，goNext(i)它们隐藏了特定的 div 标签并显示了下一个 , goPrevious(i)，它的作用几乎相同，但反过来，answerExists(questionNumber)它检查是否所有单选按钮都被选中。从我创建的那一点开始answerExists(), goNext()，我想goPrevious()也是，停止响应。也许这与onsubmit()功能有关，但我无法弄清楚。这些是 Javascript 函数：

function goNext(i) {
  document.getElementById("div" + i).style.display = 'none';
  document.getElementById("div" + (i + 1)).style.display = 'block';
}

function goPrevious(i) {
  document.getElementById("div" + i).style.display = 'none';
  document.getElementById("div" + (i - 1)).style.display = 'block';
}

function checkAnswers(questions) {
  var answers = new Array(questions);
  for(var i = 1; i <= questions; i++){
    answers[i-1] = false;
    var radio = document.getElementsByClassName('Radio' + i);
    for (var j=0; j < radio.length; j++) {
      if(radio[j].checked == true)
         alert(radio[j].value)answers[i-1] = true;
    }
    for (var i = 0; i < questions; i++){
      if(answers[i] == false){
        alert("Please answer all questions.");
        return false;
      }   
    }
    return true;
}

这是 HTML 表单：

<form id="content" action="getresults.jsp" method="post" onsubmit="return checkAnswers(2);">
    <div id="div1" style="display: block;">
        <strong>1. Question 1</strong><br><br>&nbsp;&nbsp;
        <input id="radio1" class="radio1" name="radio1" onclick="if (this.__chk) this.checked = false" onmousedown="this.__chk = this.checked" type="radio" value="Answer1" /> 
        Answer1<br><br><br><br>
        <div class="auto-style1">
            <input name="next" onclick="goNext(1);" type="button" value="Next" />
        </div>
    </div>
    <div id="div2" style="display: none;">
        <strong>2. Question 2</strong><br><br>&nbsp;&nbsp;
        <input id="radio2" class="radio2" name="radio2" onclick="if (this.__chk) this.checked = false" onmousedown="this.__chk = this.checked" type="radio" value="Answer 2" /> 
        Answer 2<br><br>&nbsp;&nbsp;
        <input id="radio2" class="radio2" name="radio2" onclick="if (this.__chk) this.checked = false" onmousedown="this.__chk = this.checked" type="radio" value="dfgdgfdgf" /> 
        dgfgddgf<br><br><br><br>
        <div class="auto-style1">
            <input name="previous" onclick="goPrevious(2);" type="button" value="Previous" />&nbsp;
            <input name="submit" type="submit" value="Submit" />
        </div>
    </div>
</form>

它实际上都是动态创建的，但在我添加checkAnswers()函数之前它仍然有效。

4

3 回答 3

3

问题是您的checkAnswers函数中有语法错误，解释器会丢弃任何包含语法错误的脚本，因此您的所有其他函数也会被丢弃。

这是两个语法错误：

  • alert(radio[j].value)answers[i-1] = true;不是一个有效的陈述。（我猜您打算删除该alert(radio[j].value)部分，但突出显示了错误的内容？）
  • 你的左花括号{比右花括号多}。

一旦你解决了这两个问题，脚本至少应该运行（尽管你可能还有一些调试工作要做）。

于 2012-12-28T20:08:20.830 回答
1

您使用 2 作为参数调用 checkAnswers 并用它构建一个数组。？？？

下面的代码将显示错误。

try{
  //your code
}catch(er){
  alert(er);
}
于 2012-12-28T20:13:43.287 回答
0

我喜欢一步一步地回答你......

1）为什么你真的需要检查是否所有问题的答案都被检查了？我问你这个是因为默认情况下单选按钮会选择一个选项......或者你可以为特定选项制作一个“活动”的东西......这样做你真的不需要检查是否所有问题都得到了回答。 ..因为默认选择一个答案...

2）点击事件不起作用，因为您似乎没有输入标签“下一个”，“上一个”，“提交”的任何“ID”......每个都有单独的ID并捕获该特定标签的点击事件通过使用 jquery...

例如。有下一个 id<input id="next">

$("#next").click(function() {
    //perform the action you need
  }

对所有点击事件执行此操作....

3）最后......不要对你喜欢点击的元素使用输入标签......尝试使用按钮标签......

希望它会帮助你:)...

于 2012-12-28T20:18:08.670 回答