两个独立的脚本混合起来并提供意外的输出

Question

我正在尝试在同一页面上提供2个测验，但是当我点击按钮获得分数时，第一个不起作用。我脑子里有这两个Javascripts：

<script language="JavaScript">
    var q1numQues = 5;
    var q1numChoi = 4;

    var q1answers = new Array(5);
    q1answers[0] = "11";
    q1answers[1] = "3";
    q1answers[2] = "8";
    q1answers[3] = "15";
    q1answers[4] = "4";

    function getQuiz1Score(form) {
        var score = 0;
        var currElt;
        var currSelection;

        for (i = 0; i < q1numQues; i++) {
            currElt = i * q1numChoi;
            for (j = 0; j < q1numChoi; j++) {
                currSelection = form.elements[currElt + j];
                if (currSelection.checked) {
                    if (currSelection.value == q1answers[i]) {
                        score++;
                        break;
                    }
                }
            }
        }

        score = Math.round(score / q1numQues * 100);
        form.percentage.value = score + "%";

        var correctAnswers = "";
        for (i = 1; i <= q1numQues; i++) {
            correctAnswers += i + ". " + q1answers[i - 1] + "\r\n";
        }
        form.solutions.value = correctAnswers;
        break;

    }
</script>


<script language="JavaScript">
    var q2numQues = 4;
    var q2numChoi = 3;

    var q2answers = new Array(4);
    q2answers[0] = "UK";
    q2answers[1] = "USA";
    q2answers[2] = "Mexico";
    q2answers[3] = "Canada";

    function getQuiz2Score(form) {
        var score = 0;
        var currElt;
        var currSelection;

        for (i = 0; i < q2numQues; i++) {
            currElt = i * q2numChoi;
            for (j = 0; j < q2numChoi; j++) {
                currSelection = form.elements[currElt + j];
                if (currSelection.checked) {
                    if (currSelection.value == q2answers[i]) {
                        score++;
                        break;
                    }
                }
            }
        }

        score = Math.round(score / q2numQues * 100);
        form.percentage.value = score + "%";

        var correctAnswers = "";
        for (i = 1; i <= q2numQues; i++) {
            correctAnswers += i + ". " + q2answers[i - 1] + "\r\n";
        }
        form.solutions.value = correctAnswers;

    }
</script>

这些是我的测验：

   <div class="container" id="pill">

            <ul class="nav nav-pills">
                <li class="active"><a data-toggle="tab" href="#mathquiz">Maths Quiz</a></li>
                <li><a data-toggle="tab" href="#geographyquiz">Geography Quiz</a></li>


            </ul>

            <div class="tab-content">
                <div id="mathquiz" class="tab-pane fade in active">
                    <div class="image-container">
                        <img src="images/math.png" class="img-responsive" alt="Our Values Banner">
                    </div>
                    <br>
                    <h4 align="center">Maths Quiz - Please click Get Score after completing to get your score</h4>

                    <form name="quiz" align="center"> <b>
1. What is 4+7?<br>
<input type="radio" name="q1" value="5">5<br>
<input type="radio" name="q1" value="10">10<br>
<input type="radio" name="q1" value="11">11<br>
<input type="radio" name="q1" value="20">20<br>


2. What is 5-2?<br>
<input type="radio" name="q2" value="0">0<br>
<input type="radio" name="q2" value="5">5<br>
<input type="radio" name="q2" value="3">3<br>
<input type="radio" name="q2" value="8">8<br>


3. What is 4*2?<br>
<input type="radio" name="q3" value="33">33<br>
<input type="radio" name="q3" value="20">20<br>
<input type="radio" name="q3" value="1">1<br>
<input type="radio" name="q3" value="8">8<br>


4. What is 3+12?<br>
<input type="radio" name="q4" value="15">15<br>
<input type="radio" name="q4" value="4">4<br>
<input type="radio" name="q4" value="78">78<br>
<input type="radio" name="q4" value="1">1<br>


5. What is 8/2?<br>
<input type="radio" name="q5" value="4">4<br>
<input type="radio" name="q5" value="7">7<br>
<input type="radio" name="q5" value="9">9<br>
<input type="radio" name="q5" value="8">8<br>


<input type="button" value="Get score" onClick="getQuiz1Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea> </b>
                    </form>
                </div>


                <div id="geographyquiz" class="tab-pane fade">
                    <div class="image-container">
                        <img src="images/geography.jpg" class="img-responsive" alt="Geography Quiz">
                    </div>

                    <h4 align="center">Geography Quiz</h4>


                    <form name="quiz" align="center"> <b>
Identify the country the flag belongs to! <br><br>
1. <div class="image-container">
                    <img src="images/britishflag.png" class="img-responsive" alt="British Flag">
                </div><br>
<input type="radio" name="q1" value="UK">UK<br>
<input type="radio" name="q1" value="Germany">Germany<br>
<input type="radio" name="q1" value="Italy">Italy<br><br>


2. <div class="image-container">
                    <img src="images/usaflag.png" class="img-responsive" alt="USA Flag">
                </div><br>
<input type="radio" name="q2" value="Ireland">Ireland<br>
<input type="radio" name="q2" value="Belgium">Belgium<br>
<input type="radio" name="q2" value="USA">USA<br><br>


3. <div class="image-container">
                    <img src="images/mexicoflag.png" class="img-responsive" alt="Mexican Flag">
                </div><br>
<input type="radio" name="q3" value="Brazil">Brazil<br>
<input type="radio" name="q3" value="Mexico">Mexico<br>
<input type="radio" name="q3" value="Chile">Chile<br><br>


4. <div class="image-container">
                    <img src="images/canadaflag.png" class="img-responsive" alt="Canadian Flag">
                </div><br>
<input type="radio" name="q4" value="Japan">Japan<br>
<input type="radio" name="q4" value="Portugal">Portugal<br>
<input type="radio" name="q4" value="Canada">Canada<br>


<input type="button" value="Get score" onClick="getQuiz2Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea> </b>
                    </form>


                </div>

请帮助我使“获得分数”按钮有效。

Answer 1

注意：在OP进行编辑以实现下面建议的更改之前，以下内容是相关的。如Rion Williams's answer所述，OP的修复程序归结为多余break。

第一个脚本以

开头

 <script language="JavaScript">
<!--

var numQues = 5;
var numChoi = 4;

<!--在那里做什么？您稍后会在脚本中界定此注释，但您可以通过编写// -->来注释掉分隔符。

无论如何，你的第二个脚本以

开头

<script language="JavaScript">

var numQues = 4;
var numChoi = 3;

您需要了解的是，您要在全球范围内声明这些变量;在任何给定的时间点，脚本A中的numQuest与脚本B中的numQuest完全相同（反之亦然）。由于在JavaScript中全局声明变量的性质，当您编写

时

var numQuest = 5;

你是在有效地写作

window.numQuest = 5;

将变量numQuest设置为在整个浏览器对象模型（BOM）中定义和访问。 window上的Read this resource和BOM。

您需要重命名变量或范围变量，如下所示：

<script language="JavaScript">
    (function() {
        var numQues = 5;
        var numChoi = 4;
        ... rest of code ...
     })();
</script>

我建议你仔细阅读：

https://stackoverflow.com/a/8348725/5137782

Answer 2

范围和功能覆盖问题

目前，您的函数名称是相同的getScore(name)，因此第二个声明实际上覆盖了第一个，而您的变量也是如此。

考虑将每个问题分别更改为getQ1Score()和getQ2Score()以及调用它们的位置，并将q1和q2附加到您的变量及其声明中：< / p>

// Quiz 1 variables
var q1numQues = 5;
var q1numChoi = 4;
var q1answers = ["11", "3", "8", "15", "4"];
// Quiz 1 score function
function getQ1Score(form) { 
    /* Omitted for brevity (but ensure you update your variable names too) */
}

以及：

<!-- This will explicitly call your Q1 score calculation -->
<input type="button" value="Get score" onclick="getQ1Score(this.form)">

这些是break; s

此外，您在break;处有一个分散的getQuiz1Score()声明，这会导致事情发生：

// Remove this to get things up and running
break;

考虑重构一点

总的来说，您可能需要考虑8proton's response中关于确定函数范围的一些要点，以便您不必担心重命名所有内容（特别是如果您打算在将来添加一些额外的测验）

更新更改的示例输出和代码段

// Quiz 1 variables
var q1numQues = 5;
var q1numChoi = 4;
var q1answers = ["11", "3", "8", "15", "4"];
// Quiz 1 score function
function getQ1Score(form) {
  var score = 0;
  var currElt;
  var currSelection;

  for (i = 0; i < q1numQues; i++) {
    currElt = i * q1numChoi;
    for (j = 0; j < q1numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        if (currSelection.value == answers[i]) {
          score++;
          break;
        }
      }
    }
  }

  score = Math.round(score / q1numQues * 100);
  form.percentage.value = score + "%";

  var correctAnswers = "";
  for (i = 1; i <= q1numQues; i++) {
    correctAnswers += i + ". " + q1answers[i - 1] + "\r\n";
  }
  form.solutions.value = correctAnswers;

}

// -->


// Quiz 2 variables
var q2numQues = 4;
var q2numChoi = 3;
var q2answers = ["UK", "USA", "Mexico", "Canada"];
// Quiz 2 score function
function getQ2Score(form) {
  var score = 0;
  var currElt;
  var currSelection;

  for (i = 0; i < q2numQues; i++) {
    currElt = i * q2numChoi;
    for (j = 0; j < q2numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        if (currSelection.value == q2answers[i]) {
          score++;
          break;
        }
      }
    }
  }

  score = Math.round(score / q2numQues * 100);
  form.percentage.value = score + "%";

  var correctAnswers = "";
  for (i = 1; i <= q2numQues; i++) {
    correctAnswers += i + ". " + q2answers[i - 1] + "\r\n";
  }
  form.solutions.value = correctAnswers;

}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="tab-content">
    <div id="mathquiz" class="tab-pane fade in active">
      <div class="image-container">
        <img src="images/math.png" class="img-responsive" alt="Our Values Banner">
      </div>
      <br>
      <h4 align="center">Maths Quiz - Please click Get Score after completing to get your score</h4>

      <form name="quiz1" align="center"> <b>
1. What is 4+7?<br>
<input type="radio" name="q1" value="5">5<br>
<input type="radio" name="q1" value="10">10<br>
<input type="radio" name="q1" value="11">11<br>
<input type="radio" name="q1" value="20">20<br>


2. What is 5-2?<br>
<input type="radio" name="q2" value="0">0<br>
<input type="radio" name="q2" value="5">5<br>
<input type="radio" name="q2" value="3">3<br>
<input type="radio" name="q2" value="8">8<br>


3. What is 4*2?<br>
<input type="radio" name="q3" value="33">33<br>
<input type="radio" name="q3" value="20">20<br>
<input type="radio" name="q3" value="1">1<br>
<input type="radio" name="q3" value="8">8<br>


4. What is 3+12?<br>
<input type="radio" name="q4" value="15">15<br>
<input type="radio" name="q4" value="4">4<br>
<input type="radio" name="q4" value="78">78<br>
<input type="radio" name="q4" value="1">1<br>


5. What is 8/2?<br>
<input type="radio" name="q5" value="4">4<br>
<input type="radio" name="q5" value="7">7<br>
<input type="radio" name="q5" value="9">9<br>
<input type="radio" name="q5" value="8">8<br>


<input type="button" value="Get score" onclick="getQ1Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea> </b>
      </form>
    </div>


    <div id="geographyquiz" class="tab-pane fade">
      <div class="image-container">
        <img src="images/geography.jpg" class="img-responsive" alt="Geography Quiz">
      </div>

      <h4 align="center">Geography Quiz</h4>


      <form name="quiz2" align="center"> <b>
Identify the country the flag belongs to! <br><br>
1. <div class="image-container">
                    <img src="images/britishflag.png" class="img-responsive" alt="British Flag">
                </div><br>
<input type="radio" name="q1" value="UK">UK<br>
<input type="radio" name="q1" value="Germany">Germany<br>
<input type="radio" name="q1" value="Italy">Italy<br><br>


2. <div class="image-container">
                    <img src="images/usaflag.png" class="img-responsive"    alt="USA Flag">
                </div><br>
<input type="radio" name="q2" value="Ireland">Ireland<br>
<input type="radio" name="q2" value="Belgium">Belgium<br>
<input type="radio" name="q2" value="USA">USA<br><br>


3. <div class="image-container">
                    <img src="images/mexicoflag.png" class="img-responsive" alt="Mexican Flag">
                </div><br>
<input type="radio" name="q3" value="Brazil">Brazil<br>
<input type="radio" name="q3" value="Mexico">Mexico<br>
<input type="radio" name="q3" value="Chile">Chile<br><br>


4. <div class="image-container">
                    <img src="images/canadaflag.png" class="img-responsive" alt="Canadian Flag">
                </div><br>
<input type="radio" name="q4" value="Japan">Japan<br>
<input type="radio" name="q4" value="Portugal">Portugal<br>
<input type="radio" name="q4" value="Canada">Canada<br>


<input type="button" value="Get score" onClick="getQ2Score(this.form)">
<input type="reset" value="Clear">
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>     </b>
      </form>
</body>

</html>