如何使用Javascript計算正確答案的數量？
[英]How to count the number of correct answers using Javascript?
問題描述
我正在嘗試創建一個關於計算我所用手指數量的簡單網站（隨機數）。 但是，我想在網站上添加額外的東西。 我正在嘗試在容器一側創建一個計數器，用於計算正確答案的數量，並在用戶錯誤地提出問題時降至零。 這是我的網站代碼......
<!doctype html>
<html>
<head>
<title>Changing Website Content</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background-image: url(nyc.jpg);
width:100%;
font-family: 'Open Sans', sans-serif;
}
#main {
margin: 100px;
background-color: #ede1e1;
padding: 50px;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<p>How many fingers am I holding up? Pick a number 1 - 5.</p>
<input id="fingers" type="text">
<button type="submit" id="fingerChecker">Guess?</button>
</div>
<script type="text/javascript">
document.getElementById("fingerChecker").onclick = function() {
var fingers = document.getElementById("fingers").value;
var random1 = (Math.floor((Math.random() * 5) + 1))
if (fingers == (random1)) {
alert("Yes, you are correct!")
} else {
alert("Nope! I had " + random1);
}
}
</script>
</body>
</html>
歡迎任何幫助。 （這是我的第一篇帖子，所以我可能犯了任何錯誤！）
5 個解決方案
解決方案1
1 已采納 2016-04-29 13:31:05
您應該創建一個分數變量，如果答案是正確的，則增加分數並將其設置為分數元素的innerHTML 。 如果用戶得到錯誤答案，則將分數重置為0。
var score = 0; document.getElementById("fingerChecker").onclick = function() { var fingers = document.getElementById("fingers").value; var random1 = (Math.floor((Math.random() * 2) + 1)) if (fingers == (random1)) { alert("Yes, you are correct!"); score++; } else { alert("Nope! I had " + random1); score = 0; } document.getElementById("score").innerHTML = score; }
<div id="main"> <p>How many fingers am I holding up? Pick a number 1 - 5.</p> <input id="fingers" type="text"> <button type="submit" id="fingerChecker">Guess?</button> </div> <div id="score">0</div>
解決方案2
1 2016-04-29 13:31:30
每次用戶按下按鈕檢查他們的猜測時，如果正確，您可能希望有一個計數器增量。
考慮聲明一個變量來存儲正確答案的數量：
// This will store the number of correct guesses that have been made
var correctAnswers = 0;
然后當用戶嘗試猜測時，確定它是否正確，增加它並在您的函數中顯示更新的值：
<script type="text/javascript">
// Variable to store your correct answers
var correctAnswers = 0;
// When your button is clicked
document.getElementById("fingerChecker").onclick = function() {
// Read the value and determine if the guess was correct
var fingers = document.getElementById("fingers").value;
var random1 = (Math.floor((Math.random() * 5) + 1))
if (fingers == (random1)) {
alert("Yes, you are correct!");
// Show the number of correct answers (and increment)
document.getElementById('correct').innerHTML = ++correctAnswers;
} else {
alert("Nope! I had " + random1);
}
}
</script>
最后，您只需要引用元素以在標記中顯示結果：
<!-- Make an element to display your results -->
You have answered correctly <span id='correct'>0</span> times.
例
您可以在此處查看此示例並在下面演示：
解決方案3
0 2016-04-29 13:31:54
只需創建一個變量並在每次用戶正確猜測時遞增它，並在用戶猜錯時將其設置為0，而不是將該變量打印到div。
<div id="main">
<p>How many fingers am I holding up? Pick a number 1 - 5.</p>
<input id="fingers" type="text">
<button type="submit" id="fingerChecker">Guess?</button>
<p id="counter">0</p>
</div>
<script type="text/javascript">
var counter = 0;
document.getElementById("fingerChecker").onclick = function() {
var fingers = document.getElementById("fingers").value;
var random1 = (Math.floor((Math.random() * 5) + 1))
if (fingers == (random1)) {
counter ++;
alert("Yes, you are correct!")
} else {
counter = 0;
alert("Nope! I had " + random1);
}
document.getElementById("counter").innerText = counter;
}
</script>
</body>
</html>
解決方案4
0 2016-04-29 13:33:46
你只需創建一個全局變量並在它是一個好的響應時遞增。
嘗試這樣的事情。
<script type="text/javascript">
var goodanswer=0;
document.getElementById("fingerChecker").onclick = function() {
var fingers = document.getElementById("fingers").value;
var random1 = (Math.floor((Math.random() * 5) + 1))
if (fingers == (random1)) {
alert("Yes, you are correct!");
goodanswer++;
} else {
alert("Nope! I had " + random1);
goodanswer=0;
}
document.getElementById("answers").innerHTML="Correct answers : "+goodanswer;
}
</script>
解決方案5
0 2016-04-29 13:37:09
HTMLBody
<body>
<div id="main">
<p>How many fingers am I holding up? Pick a number 1 - 5</p>
<input id="fingers" type="text">
<button type="submit" id="fingerChecker">Guess?</button>
<span id="correct"></span>
</div>
</body>
JS
var globals = {
correct : 0
};
document.getElementById("fingerChecker").onclick = function() {
var fingers = document.getElementById("fingers").value;
var random1 = (Math.floor((Math.random() * 5) + 1))
if (fingers == (random1)) {
globals.correct++;
alert("Yes, you are correct!")
} else {
globals.correct = 0;
alert("Nope! I had " + random1);
}
var span = document.getElementById("correct");
span.textContent = globals.correct;
}
我也稍微清理了你的代碼，你想嘗試在沒有必要的地方沒有空格。 在一開始它似乎是壓倒性的，但它提高了可讀性。 我將它存儲在全局變量中的原因是，使用使用相同名稱的變量庫的庫永遠不會遇到問題。
如何在javascript中將提交的測驗答案數組與正確答案數組進行比較
[英]How to compare an array of submitted quiz answers with an array of correct answers in javascript
無法獲得為 Javascript 簡單測驗計算的正確答案數量
[英]Not able to get the number of correct answers calculated for a Javascript Simple Quiz
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.