我創建了一個需要for回圈通過的物件陣列。然而，當我運行這段代碼時，我只看到了第一個問題及其答案。我究竟做錯了什么？先感謝您！
// An array of objects containing questions, answers, and the correct answers.
const questionArray = [
{
Q: "TestingQ1",
A: [
"Testing2",
"Testing3",
"Testing4",
"Testing5"
],
Correct: "Testing2"
},
{
Q: "TestingQ2",
A: [
"Testing2-2",
"Testing3-2",
"Testing4-2",
"Testing5-2"
],
Correct: "Testing3-2"
}
];
// Set to zero to target the first index in an array of objects.
let questionIndex = 0;
// showQuestions is equal to elements with the "show-questions" class. Here, a section.
let showQuestions = document.querySelector(".show-questions");
// showAnswers is equal to the elements in the "show-answers" class. Here, a section.
let showAnswers = document.querySelector(".show-answers");
// results is equal to the "results" id. Here, a span.
let results = document.querySelector("#results");
// Create a function that displays questions
function displayQuestions() {
showQuestions.textContent = questionArray[questionIndex].Q;
console.log(showAnswers);
for (let i = 0; i < questionArray[questionIndex].A.length; i ) {
let answerButton = document.createElement("button");
answerButton.textContent = questionArray[questionIndex].A[i];
// Define the function here to check the answers
answerButton.onclick = function checkAnswers() {
// If the submission is equal to Correct...
if (answerButton.innerText === questionArray[questionIndex].Correct) {
// ...show this confirmation message.
results.textContent = "Right on, popcorn! That's correct.";
console.log(checkAnswers);
// If the submission is not equal to Correct...
} else {
// ...show this error message and...
results.textContent = "Sorry, no such luck. Try again!";
// ...deduct 10 seconds from the clock.
secondsLeft -= 10;
}
};
showAnswers.appendChild(answerButton);
}
uj5u.com熱心網友回復：
您沒有看到其他問題的回圈，因為您的 for 回圈系結到您的第一個物件。
for (let i = 0; i < questionArray[questionIndex].A.length; i )
這意味著您的 for 回圈應該以您的第一個物件中答案的長度結束。在此之后，您的回圈應該關閉。要讓你的回圈遍歷所有物件，據我所知，你可以通過兩種方式： 我的首選方式
陣列上的 forEach 回圈，然后是每個物件的 for 回圈，就像您所做的那樣。
或者
您可能可以在您擁有的內部 forLoop 之前為您的陣列物件創建第一個 forLoop。
這樣，有一個回圈遍歷您的問題和一個回圈來找到您的答案。
我希望這能指導你如何去做。
uj5u.com熱心網友回復：
您需要遍歷該陣列中的所有元素。您只顯示第一個問題。
在此處閱讀有關陣列上 forEach 方法的更多資訊：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
你應該有類似的東西：
function displayQuestions() {
questionArray.forEach(function (question, index) {
// Create a new div for each question.
let questionDiv = document.createElement("div");
// Add a class to the new div.
questionDiv.classList.add("question");
// Add the question to the new div.
questionDiv.innerHTML = question.Q;
// Append the new div to the showQuestions section.
showQuestions.appendChild(questionDiv);
// Create a new div for each answer.
let answerDiv = document.createElement("div");
// Add a class to the new div.
answerDiv.classList.add("answer");
// Add the answers to the new div.
question.A.forEach(function (answer) {
answerDiv.innerHTML = `<button >${answer}</button>`;
});
// Append the new div to the showQuestions section.
showQuestions.appendChild(answerDiv);
});
uj5u.com熱心網友回復：
檢查我的 git repo 相同的應用程式，并檢查 quiz.js 檔案
我還在這里附上了 quiz.js 代碼
回購鏈接：https ://github.com/abdulhaseeb036/quiz-website
quiz.js 代碼：
var questions = [
{
id : 1,
question : "Who is the owner of this Quiz app",
answer : "Haseeb Alam Rafiq",
option : [
"Haseeb Alam Rafiq",
"Muhammad Wasi",
"Mark zinger Burger",
"None of these"
]
},
{
id : 2,
question : "When was MR HASEEB ALAM born?",
answer : "12-dec-2000",
option : [
"13-aug-2000",
"12-may-1999",
"1-march-2001",
"12-dec-2000"
]
},
{
id : 3,
question : "Which university MR HASEEB ALAM RAFIQ complete Becholars degree?",
answer : "Lumber 1 university",
option : [
"Baharia university ",
"Lumber 1 university",
"IBM university",
"DHA suffah university"
]
},
]
// var welcome = document.getElementById(location.href="../index.html" ,"first-ip");
// console.log(welcome.value);
// counter
var counter = 0;
var userPoints = 0;
function nextq() {
var userAns = document.querySelector("li.option.active").innerHTML;
if (userAns == questions[counter].answer){
userPoints = userPoints 5;
sessionStorage.setItem("points" ,userPoints);
}
if (counter == questions.length -1) {
location.href = "../end.html";
return;
}
console.log(userPoints);
counter ;
show(counter);
}
// on every onl oad mean refresh this function calls and in this function
// show(counter) function calls
window.onload = function() {
show(counter); //here counter value 0 means first q render on refresh page.
}
// this function render onclick new question with options
function show(counter) {
var question = document.getElementById("questions");
question.innerHTML=`
<h2>Q${counter 1}. ${questions[counter].question}</h2>
<ul>
<li >${questions[counter].option[0]}</li>
<li >${questions[counter].option[1]}</li>
<li >${questions[counter].option[2]}</li>
<li >${questions[counter].option[3]}</li>
</ul>
`;
toggleActive();
}
function toggleActive() {
let option1 = document.querySelectorAll("li.option");
for(let i = 0; i< option1.length; i ){
option1[i].onclick =function() {
for(let j = 0; j< option1.length; j ){
if(option1[j].classList.contains("active")){
option1[j].classList.remove("active");
}
option1[i].classList.add("active");
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/479425.html
標籤：javascript for循环