onclick（）操作未响应

Question

i 'm creating a survey-like page. I use three basic javascript functions, goNext(i) which hides a certain div tags and shows the next, goPrevious(i) , which pretty much does the same but backwards, and answerExists(questionNumber) which checks if all radio buttons are checked. From the point i created answerExists(), goNext() and i suppose goPrevious() too, stopped responding. Maybe it's something to do with the onsubmit() function, but i cant figure it out. These are the Javascript functions:

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

And this is the HTML form:

<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>

It is actually all created dynamically, but still, it worked before i added the checkAnswers() function.

Answer 1

The problem is that you have syntax errors in your checkAnswers function, and the interpreter discards any scripts that contain syntax errors, so all your other functions get discarded, too.

These are the two syntax errors:

• alert(radio[j].value)answers[i-1] = true; is not a valid statement. (I'm guessing that you intended to delete the alert(radio[j].value) part, but highlighted the wrong thing?)
• You have more left-curly-braces { than right-curly-braces } .

Once you fix both of these issues, the script should at least run (though you may still have some debugging to do).

Answer 2

You are calling checkAnswers with a 2 as parameter and build an array with it. ????

The code below will show the mistake.

try{
  //your code
}catch(er){
  alert(er);
}

Answer 3

I like to answer you step by step....

1) Why do you really need to check whether answers for all questions are checked? I asked you this because radio buttons will have selected an option by default... or you can make an "active" thing for a particular option... By doing this you really don't need to check whether all questions are answered... since by default one answer is selected...

2) The click event doesnt work because it seems you don't have any "id" for input tags "next","previous","submit"... Have separate id's for each and capture the click event of that particular tag by using jquery...

eg. Have an id for next <input id="next">

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

Do this for all click events....

3) Finally... don't use input tags for elements you like to click... Try using button tags...

Hope it ll help you :)...