为什么这些单选按钮会如何通过javascript执行?

时间:2017-04-20 22:29:45

标签: javascript html ajax xml

我只是想知道为什么我的测验中的第一个问题可以有独立于其他问题的单选按钮,但在问题1后,所有问题都充当一个单选按钮组? 这是javascript:

window.onload = getQuizXml;

function getQuizXml() {
  var quiz = new XMLHttpRequest();
  quiz.onreadystatechange = function() {
    if (quiz.readyState == 4 && quiz.status == 200) {
      searchQuiz(quiz);


    }
  };
  quiz.open("GET", "FinalQuiz.xml", true);
  quiz.send();

}

function searchQuiz(quiz) {

  var i;
  //get data as xml file
  var xmldoc = quiz.responseXML;
  var test = "<form id = 'test'>";
  //start table
  //process data by record
  var x = xmldoc.getElementsByTagName("question");
  var errorMessage = "Error, Well does not exist.";
  for (i = 0; i < x.length; i++) {

    var questionNumber = x[i].getElementsByTagName("qnumber")[0].childNodes[0].nodeValue;
    var questionTitle = x[i].getElementsByTagName("qtitle")[0].childNodes[0].nodeValue;
    var a = x[i].getElementsByTagName("a")[0].childNodes[0].nodeValue;
    var b = x[i].getElementsByTagName("b")[0].childNodes[0].nodeValue;
    var c = x[i].getElementsByTagName("c")[0].childNodes[0].nodeValue;
    var d = x[i].getElementsByTagName("d")[0].childNodes[0].nodeValue;

    test += "<br>" + questionNumber + "." +
      "<br>" +
      questionTitle +
      "<br><br>" +
      "a)<input type='radio' value='a' name ='question'>" + a +
      "<br>" +
      "b)<input type='radio' value='b' name ='question'>" + b +
      "<br>" +
      "c)<input type='radio' value='c' name ='question'>" + c +
      "<br>" +
      "d)<input type='radio' value='d' name ='question'>" + d +
      "<br></form>";



    document.getElementById("displayquiz").innerHTML = test;

  }

}

这是xml的一个示例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE finalquiz SYSTEM "FinalQuiz.dtd" >
<finalquiz>
  <question>
    <qnumber>1</qnumber>
    <qtitle>In a switch statement, the ________ case clause is used to process exceptional conditions and is usually listed last.</qtitle>
    <a>break</a>
    <b>default</b>
    <c>else</c>
    <d>then</d>
  </question>
  <question>
    <qnumber>2</qnumber>
    <qtitle>The technique of developing and maintaining a large program by constructing it from small, simple pieces is called ________.</qtitle>
    <a>divide and conquer</a>
    <b>modular programming</b>
    <c>multitasking</c>
    <d>multiprogramming</d>
  </question>
  <question>
    <qnumber>3</qnumber>
    <qtitle>All variables declared in function definitions are ________.</qtitle>
    <a>global variables</a>
    <b>static variables</b>
    <c>constant variables</c>
    <d>local variables</d>
  </question>

2 个答案:

答案 0 :(得分:0)

我认为您的单选按钮可以按不同的表单部分包装进行分组。但你的字符串附加逻辑有一个错误。 你的代码的结果如下:

<form>
  <input type='radio' value='a' name ='question'>
  <input type='radio' value='b' name ='question'>
  <input type='radio' value='c' name ='question'>
  <input type='radio' value='d' name ='question'>
</form>
<!-- there is a missing form start tag(<form>) here supposed to be -->
  <input type='radio' value='a' name ='question'>
...
</form>

因此您的代码需要更改,如下所示。

 var test = "";
  for (i = 0; i < x.length; i++) {
    test += "<form id = 'test'>";        

    ...

    test += "<br>" + questionNumber + "." +
      "<br>" +
      questionTitle +
      "<br><br>" +
      "a)<input type='radio' value='a' name ='question'>" + a +
      "<br>" +
      "b)<input type='radio' value='b' name ='question'>" + b +
      "<br>" +
      "c)<input type='radio' value='c' name ='question'>" + c +
      "<br>" +
      "d)<input type='radio' value='d' name ='question'>" + d +
      "<br></form>";

答案 1 :(得分:0)

name属性用于分隔/分组单选按钮。

如果从像PHP这样的服务器端看这个,那么值将通过表单的帖子看起来像:

$_POST['question']

如果您需要为另一个问题创建一个新组,请更改名称属性,如下所示:

<form>
  <div id='q1_label'>This is question 1:</div>
  <input type='radio' value='a' name ='question1'><span>A</span><br />
  <input type='radio' value='b' name ='question1'><span>B</span><br />
  <input type='radio' value='c' name ='question1'><span>C</span><br />
  <input type='radio' value='d' name ='question1'><span>D</span><br />
  <div id='q2_label'>This is question 2:</div>
  <input type='radio' value='a' name ='question2'><span>A</span><br />
  <input type='radio' value='b' name ='question2'><span>B</span><br />
  <input type='radio' value='c' name ='question2'><span>C</span><br />
  <input type='radio' value='d' name ='question2'><span>D</span><br />
</form>

换句话说:

每个组中不同值的完整原因是为该字段名称提供已发布的值。

服务器端现在可以像这样处理:

$q1 = $_POST['question1'];
$q2 = $_POST['question2'];

然后将传递的数据与答案纸或类似的东西进行比较。