尝试在一个脚本中创建两个多项选择题

Question

我试图在一个 Javascript 代码中创建两个多项选择题，但我尝试编辑它的每一种方式，它只读取第二个问题的正确答案。我将如何更正它，以便我的第一个问题的最终产品是 Banana, Kiwi，而第二个问题是 Null。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h1>Which is the output?</h1><br>
  <h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br> fruits.splice(1, 2);<br> document.getElementById("fruit").innerHTML = fruits;</h2>
  <form method="post" id="form1">
    <input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
    <input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
    <input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
    <input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
  </form>
  <button onclick="submitAnswer()">Submit Answer</button>
  <script type="text/javascript">
    var submitAnswer = function() {

      var radios = document.getElementsByName("choice");
      var val = "";
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          val = radios[i].value;
          break;
        }
      }

      if (val == "Banana, Kiwi") {
        alert("Correct");
      } else {
        alert("Incorrect");
      }
    };
  </script>
  <h1>Which is the output?</h1><br>
  <h2>2. var girls = ["Lucy", "Amanda"];<br> var boys = ["Toby", "Charles", "Brian"];<br> var children = (null);<br> document.getElementById("child").innerHTML = children;</h2>
  <form method="post" id="form2">
    <input type="radio" name="option" value="Undefined"> Undefined
    <input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
    <input type="radio" name="option" value="Null"> Null
    <input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
  </form>
  <button onclick="submitAnswer()">Submit Answer</button>
  <script type="text/javascript">
    var submitAnswer = function() {

      var radios = document.getElementsByName("option");
      var val = "";
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          val = radios[i].value;
          break;
        }
      }

      if (val == "Null") {
        alert("Correct");
      } else {
        alert("Incorrect");
      }
    };
  </script>

</body>

</html>

Answer 1

这是因为您对 click.I 使用了相同的函数名称，还重构了您的 codes.Hope 这有帮助。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head> 
<body>
    <h1>Which is the output?</h1><br><h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br>
    fruits.splice(1, 2);<br>
    document.getElementById("fruit").innerHTML = fruits;</h2>
<form method="post" id="form1">
<input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
<input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
<input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
<input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
</form>
<button onclick="submitAnswer()">Submit Answer</button>
    
    <h1>Which is the output?</h1><br><h2>2. var girls = ["Lucy", "Amanda"];<br>
var boys = ["Toby", "Charles", "Brian"];<br>
var children = (null);<br>
document.getElementById("child").innerHTML = children;</h2>
<form method="post" id="form2">
<input type="radio" name="option" value="Undefined"> Undefined
<input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
<input type="radio" name="option" value="Null"> Null
<input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
</form>
<button onclick="submitAnswers()">Submit Answer</button>

</body>
<script type="text/javascript">
        var submitAnswer = function() {

  var radios = document.getElementsByName("choice");
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }

  if (val === "Banana, Kiwi") {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
};
 var submitAnswers = function() {

  var radios = document.getElementsByName("option");
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }

  if (val === "Null") {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
};
    </script>
</html>

Answer 2

错误的部分是您对两个按钮都使用了 submitAnswer() 功能。当variable或function name有多个定义时，最新的定义将用于所有引用。

对于您的情况，您可以使用不同的函数，也可以如下重写 submitAnswers() 函数以提高可维护性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
  var submitAnswer = function(correctAnswer, frmInpElements) {  
    var val= "";
    var len = 0;
    if(null != frmInpElements)
    {
       len = frmInpElements.length;
    }
    for (var i = 0; i < len; i++) {
      if (frmInpElements[i].checked) {
         val = frmInpElements[i].value; 
         break;
      }
    }
    if (val == correctAnswer) {
        alert("Correct");
    } else {
        alert("Incorrect");
    }
  };
 </script>
</head> 
<body>
    <h1>Which is the output?</h1><br><h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br>
    fruits.splice(1, 2);<br>
    document.getElementById("fruit").innerHTML = fruits;</h2>
<form method="post" id="form1">
<input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
<input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
<input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
<input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
</form>
<button onclick="submitAnswer('Banana, Kiwi', document.getElementsByName('choice'));">Submit Answer</button>

<h1>Which is the output?</h1><br><h2>2. var girls = ["Lucy", "Amanda"];<br>
var boys = ["Toby", "Charles", "Brian"];<br>
var children = (null);<br>
document.getElementById("child").innerHTML = children;</h2>
<form method="post" id="form2">
<input type="radio" name="option" value="Undefined"> Undefined
<input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
<input type="radio" name="option" value="Null"> Null
<input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
</form>
<button onclick="submitAnswer('Null', document.getElementsByName('option'));">Submit Answer</button>

</script>

</body>
</html>

尝试在一个脚本中创建两个多项选择题

Trying to create two multiple choice questions in one script

javascript

html

forms

multiple-choice