我正在為運動員按順序參加的團隊創建一個猜謎游戲。但是當用戶輸入正確的答案時，remainingAttempts就會被減去，就好像他們的答案不正確一樣。如果每次猜測與陣列索引的第一個值不匹配，則僅應減去嘗試。
const data = [
{ "fName": "Alex", "lName": "Len", "position": "C", "teamSequence": ["Phoenix Suns", "Atlanta Hawks", "Sacramento Kings", "Toronto Raptors", "Washington Wizards", "Sacramento Kings"] },
{ "fName": "KZ", "lName": "Okpala", "position": "F", "teamSequence": ["Miami Heat", "Sacramento Kings"] },
{ "fName": "Matthew", "lName": "Dellavedova", "position": "G", "teamSequence": ["Cleveland Cavaliers", "Milwaukee Bucks", "Cleveland Cavaliers", "Sacramento Kings"] },
{ "fName": "Chima", "lName": "Moneke", "position": "F", "teamSequence": ["Sacramento Kings"] }
];
//Choose a random player from the data set for the user to guess
var player;
// var teamSequence;
var teams;
$(document).ready(function getRandomPlayer() {
// Create array of object keys
const keys = Object.keys(data)
// Generate random index based on number of keys
const randIndex = Math.floor(Math.random() * keys.length)
// Select a key from the array of keys using the random index
const randKey = keys[randIndex]
// Use the key to get the corresponding name from the "names" object
player = data[randKey]
$('#mainDiv').text((player.fName " " player.lName));
// get team sequence & count
teamSequence = player.teamSequence;
console.log('teamSequence: ' teamSequence);
teams = teamSequence.length;
});
var remainingAttempts = 5;
var correct = 0;
var form = document.getElementById("form");
// submit form when enter button is pressed
function readInput(el, e) {
if (e.keyCode == 13) {
for (var i = 0; i < teams; i ) {
// player.teamSequence[i]
let inputVal = document.getElementById('inputField').value;
if (inputVal === teamSequence[0]) {
correct ;
$('#correctAnswers').text(correct ' correct so far');
$('#attempts').hide();
teamSequence.shift();
console.log(teamSequence);
form.reset();
break
} else {
remainingAttempts--;
$('#attempts').text('Remaining Attempts: ' remainingAttempts);
$('#attempts').show();
form.reset();
}
}
if (teamSequence.length === 0) {
$("input").prop('disabled', true);
// $('#answerReveal').text(teamSequence ' is correct!');
} else if (remainingAttempts == 0) {
$('#mainDiv').text('Out of tries');
$('#inputField, #attempts, .modal-title, #numOfGuesses').hide();
$('#answerReveal').text('Sorry, you missed ' teamSequence);
// $("input").prop('disabled', true);
}
}
}<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<div class="d-flex w-75 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<nav class="nav nav-masthead justify-content-center float-md-end">
</nav>
</div>
</header>
<div class="row">
<div class="col-12">
<h1 id="mainDiv"></h1>
<form id="form" autocomplete="off" action="/action_page.php">
<div class="form-group autocomplete d-inline-flex align-items-center mt-3 w-50">
<input type="text" class="form-control" id="inputField" onkeydown="readInput(this, event)" required>
</div>
</form>
<h5 class="mt-3" id="attempts"></h5>
<h5 class="mt-3" id="correctAnswers"></h5>
</div>
</div>
</div>uj5u.com熱心網友回復：
你不需要for回圈。您只關心他們是否進入了團隊序列的第一個元素。如果他們這樣做了，那就是正確的，否則你會減少剩余嘗試的次數。
const data = [{
"fName": "Alex",
"lName": "Len",
"position": "C",
"teamSequence": ["Phoenix Suns", "Atlanta Hawks", "Sacramento Kings", "Toronto Raptors", "Washington Wizards", "Sacramento Kings"]
},
{
"fName": "KZ",
"lName": "Okpala",
"position": "F",
"teamSequence": ["Miami Heat", "Sacramento Kings"]
},
{
"fName": "Matthew",
"lName": "Dellavedova",
"position": "G",
"teamSequence": ["Cleveland Cavaliers", "Milwaukee Bucks", "Cleveland Cavaliers", "Sacramento Kings"]
},
{
"fName": "Chima",
"lName": "Moneke",
"position": "F",
"teamSequence": ["Sacramento Kings"]
}
];
//Choose a random player from the data set for the user to guess
var player;
// var teamSequence;
var teams;
$(document).ready(function getRandomPlayer() {
// Create array of object keys
const keys = Object.keys(data)
// Generate random index based on number of keys
const randIndex = Math.floor(Math.random() * keys.length)
// Select a key from the array of keys using the random index
const randKey = keys[randIndex]
// Use the key to get the corresponding name from the "names" object
player = data[randKey]
$('#mainDiv').text((player.fName " " player.lName));
// get team sequence & count
teamSequence = player.teamSequence;
console.log('teamSequence: ' teamSequence);
teams = teamSequence.length;
});
var remainingAttempts = 5;
var correct = 0;
var form = document.getElementById("form");
// submit form when enter button is pressed
function readInput(el, e) {
if (e.keyCode == 13) {
// player.teamSequence[i]
let inputVal = document.getElementById('inputField').value;
if (inputVal === teamSequence[0]) {
correct ;
$('#correctAnswers').text(correct ' correct so far');
$('#attempts').hide();
teamSequence.shift();
console.log(teamSequence);
form.reset();
} else {
remainingAttempts--;
$('#attempts').text('Remaining Attempts: ' remainingAttempts);
$('#attempts').show();
form.reset();
}
if (teamSequence.length === 0) {
$("input").prop('disabled', true);
// $('#answerReveal').text(teamSequence ' is correct!');
} else if (remainingAttempts == 0) {
$('#mainDiv').text('Out of tries');
$('#inputField, #attempts, .modal-title, #numOfGuesses').hide();
$('#answerReveal').text('Sorry, you missed ' teamSequence);
// $("input").prop('disabled', true);
}
}
}<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<div class="d-flex w-75 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<nav class="nav nav-masthead justify-content-center float-md-end">
</nav>
</div>
</header>
<div class="row">
<div class="col-12">
<h1 id="mainDiv"></h1>
<form id="form" autocomplete="off" action="/action_page.php">
<div class="form-group autocomplete d-inline-flex align-items-center mt-3 w-50">
<input type="text" class="form-control" id="inputField" onkeydown="readInput(this, event)" required>
</div>
</form>
<h5 class="mt-3" id="attempts"></h5>
<h5 class="mt-3" id="correctAnswers"></h5>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/507999.html
標籤：javascript