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 can’t 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).