[英]Two independent scripts getting mixed up and giving unexpected output
我試圖在同一頁面上進行2次測驗，但是當我單擊“ 獲取分數 ”按鈕時，第一個測驗不起作用。 我頭上有這兩個Javascript：
<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>
請幫助我使“獲取分數”按鈕起作用。
注意：在OP進行修改以實施以下建議的更改之前，需要注意以下事項。 如賴恩·威廉姆斯（Rion Williams）的回答所指出的那樣，對OP的修復已被徹底break 。
第一個腳本以
<script language="JavaScript">
<!--
var numQues = 5;
var numChoi = 4;
那是什么<!--在那做什么？ 您稍后在腳本中定界此注釋，但是通過編寫// -->注釋出分隔符。
無論如何，您的第二個腳本以
<script language="JavaScript">
var numQues = 4;
var numChoi = 3;
您需要了解的是，您正在全局聲明這些變量。 在任何給定時間點， numQuest在腳本A是確切相同numQuest在腳本B（並且反之亦然）。 由於在編寫時在JavaScript中全局聲明變量的性質，
var numQuest = 5;
你正在有效地寫作
window.numQuest = 5;
它將變量numQuest為已定義，並且可以在整個瀏覽器對象模型（BOM）中訪問。 閱讀有關window和BOM的資源 。
您需要重命名變量或對變量進行范圍划分，如下所示：
<script language="JavaScript">
(function() {
var numQues = 5;
var numChoi = 4;
... rest of code ...
})();
</script>
我建議您仔細閱讀以下內容：
作用域和功能覆蓋問題
當前，您的函數名稱與getScore(name)相同，因此第二個聲明實際上覆蓋了第一個聲明，並且您的變量也是如此。
考慮將它們分別更改為getQ1Score()和getQ2Score()以及它們的調用位置，並將q1和q2附加到變量及其聲明中：
// 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響應中涉及的有關范圍界定功能的一些要點，因此您不必擔心重命名所有內容（特別是如果將來打算添加一些其他測驗的話）。
示例輸出和具有更新更改的代碼段
// 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>
創建兩個動態表的函數以某種方式鏈接並混淆
[英]Function creating two dynamic tables are somehow linked and getting mixed up
布爾表達式-與AND，OR邏輯運算符以及它們的工作方式混雜在一起
[英]Boolean expressions - getting mixed up with AND, OR logical operators and how they work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.