为什么我的函数不动态创建新元素？
Why is my function not dynamically creating new elements?
我创建了 progressSquareBoxes() 来动态创建新的 div，在该特定实例中有 10 个，然后将它们附加到“progressContainer”元素。我上周使用了这种方法，效果很好。现在没有创建 div。最重要的是，控制台甚至没有抛出错误，这使得查明我出错的地方变得更具挑战性。请帮忙。
const start = document.querySelector(".start");
const timer = document.querySelector(".timer");
const quiz = document.querySelector(".quiz");
const question = document.querySelector(".question");
const allAnswerChoices = document.querySelectorAll(".choice")
const answerChoiceA = document.getElementById("A");
const answerChoiceB = document.getElementById("B");
const answerChoiceC = document.getElementById("C");
const answerChoiceD = document.getElementById("D");
const counter = document.querySelector(".counter");
const timeGauge = document.querySelector(".time-gauge");
const progressContainer = document.querySelector(".progress-container");
const scoreContainer = document.querySelector(".score-container");
// Questions
let questions = [
{
question: "How many different sounds can a cat make?",
questionImg: "img/1.jpg",
choiceA: "100",
choiceB: "150",
choiceC: "10",
choiceD: "27",
correctAnswer: "100",
},
{
question: "What breed of cat has a reputation for being cross-eyed?",
questionImg: "img/2.jpg",
choiceA: "Himalayan",
choiceB: "Egyptian Mau",
choiceC: "Siamese",
choiceD: "Persian",
correctAnswer: "Siamese",
},
{
question: "What is the most common training command taught to dogs?",
questionImg: "img/3.jpg",
choiceA: "Stay",
choiceB: "Sit",
choiceC: "Dance",
choiceD: "Roll",
correctAnswer: "Sit",
},
{
question: "What is a dog’s most highly developed sense?",
questionImg: "img/4.jpg",
choiceA: "Smell",
choiceB: "Sight",
choiceC: "Taste",
choiceD: "Touch",
correctAnswer: "Smell",
},
{
question: " How many known species of birds are there?",
questionImg: "img/5.jpg",
choiceA: "5,000",
choiceB: "10,000",
choiceC: "20,000",
choiceD: "40,000",
correctAnswer: "10,000",
},
{
question: "What evolutionary adaptation helps birds fly?",
questionImg: "img/6.jpg",
choiceA: "Rapid Digestion",
choiceB: "Beaks",
choiceC: "Hollow Bones",
choiceD: "All of These",
correctAnswer: "All of These",
},
{
question:
"Which of the following is not one of the four remaining subspecies of elk in North America?",
questionImg: "img/7.jpg",
choiceA: "Manitoba Elk",
choiceB: "Highland Elk",
choiceC: "Rocky Mountain Elk",
choiceD: "Tule Elk",
correctAnswer: "Highland Elk",
},
{
question: "What is a baby elk called?",
questionImg: "img/8.jpg",
choiceA: "Bull",
choiceB: "Sow",
choiceC: "Cow",
choiceD: "Calf",
correctAnswer: "Calf",
},
{
question: "What do wolves use their scent for?",
questionImg: "img/9.jpg",
choiceA: "Marking Territory",
choiceB: "Finding Prey",
choiceC: "A Cover-up",
choiceD: "Nothing",
correctAnswer: "Marking Territory",
},
{
question:
"If a wolf trespasses on the territory of other wolves, what will happen?",
questionImg: "img/10.jpg",
choiceA: "Nothing",
choiceB: "It will be accepted into the pack",
choiceC: "It will be chased or killed",
choiceD: "It will be required to present prey to the pack",
correctAnswer: "It will be chased or killed",
},
];
// Necessary variables
[activeQuestion, count, time] = [0, 0, 0];
[guageLength, timeUp, lastQuestion] = [800, 10, question.length-1];
[gaugeUnit] = [guageLength / timeUp]
start.addEventListener("click", function(e) {
quiz.style.visibility = "visible";
start.style.visibility = "hidden";
app();
})
function renderQuiz() {
let q = questions[activeQuestion];
answerChoiceA.innerHTML = q.choiceA;
answerChoiceB.innerHTML = q.choiceB;
answerChoiceC.innerHTML = q.choiceC;
answerChoiceD.innerHTML = q.choiceD;
question.innerHTML = q.question;
document.body.style.backgroundImage = `url(${q.questionImg})`;
}
function gaugeFunction () {
if(count <= timeUp) {
timeGauge.style.width = `${count*gaugeUnit}px`
count++
} else {
count = 0;
}
}
function timeFunction() {
if(time <= timeUp) {
counter.innerHTML = time;
time++;
} else {
time = 0;
}
}
function progressSquareBoxes() {
for(var questionIndex = 0; questionIndex <= lastQuestion; questionIndex++) {
let newEl = document.createElement("div");
newEl.setAttribute("class", "progress-bar");
newEl.setAttribute("id", questionIndex);
progressContainer.appendChild(newEl)
}
}
app = () => {
renderQuiz();
setInterval(gaugeFunction, 1000);
setInterval(timeFunction, 1000);
progressSquareBoxes();
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
/* background-image: url("img/1.jpg"); */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.6;
}
.container {
height: 700px;
width: 1400px;
position: relative;
}
.start h1 {
font-weight: 100;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
background-color: #41444b;
padding: 20px 50px;
color: white;
}
.quiz {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-row-gap: 20px;
visibility: hidden;
}
.quiz > * {
display: flex;
align-items: center;
justify-content: center;
}
.question {
font-size: 35px;
letter-spacing: 2px;
background-color: rgba(247, 247, 247, 0.7);
place-self: center;
padding: 15px 30px;
text-align: center;
}
/* .quiz .question {
background-color: lightcyan;
} */
/* .quiz .choices {
background-color: lightsalmon;
} */
/* .quiz .timer {
background-color: lightskyblue;
} */
/* .quiz .progress {
background-color: lemonchiffon;
} */
/* Answer Choices */
.choices {
width: 100%;
justify-content: space-evenly;
}
.choice {
cursor: pointer;
background-color: rgba(27, 118, 141, 0.7);
padding: 7px 15px;
text-align: center;
color: white;
font-size: 20px;
height: 150px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Answer Timer */
.timer {
align-self: flex-end;
flex-direction: column;
}
.counter {
font-size: 40px;
width: 10px;
height: 10px;
color: rgb(27, 118, 141);
}
.time-gauge-bg,
.time-gauge {
position: absolute;
top: 78%;
left: 22%;
}
.time-gauge-bg {
height: 10px;
width: 800px;
background-color: lightgrey;
}
.time-gauge {
height: 10px;
background-color: rgb(179, 6, 247);
}
/* Progress Container */
.progress-bar {
height: 30px;
width: 30px;
background-color: lightgrey;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Project #22 - The Animal Trivia Quiz App</title>
</head>
<body>
<div class="container">
<div class="start">
<h1>Start</h1>
</div>
<div class="quiz">
<div class="question"></div>
<!-- Answer Choices -->
<div class="choices">
<div class="choice" id="A"></div>
<div class="choice" id="B"></div>
<div class="choice" id="C"></div>
<div class="choice" id="D"></div>
</div>
<!-- Answer Timer -->
<div class="timer">
<div class="counter"></div>
<div class="time-gauge-bg"></div>
<div class="time-gauge"></div>
<div class="dummy"></div>
</div>
<!-- Progress -->
<div class="progress-container"></div>
</div>
<!-- Score Container -->
<div class="score-container"></div>
</div>
<!-- ------------------------ -->
<!-- JS File -->
<script src="index.js"></script>
</body>
</html>
主要问题来自方法 progressSquareBoxes()，其中 lastQuestion 未定义，因此它从未进入 for 循环
一个建议可以是使用问题数组的最后一个索引来恢复 lastQuestions
lastQuestion = questions.length - 1;
const start = document.querySelector(".start");
const timer = document.querySelector(".timer");
const quiz = document.querySelector(".quiz");
const question = document.querySelector(".question");
const allAnswerChoices = document.querySelectorAll(".choice")
const answerChoiceA = document.getElementById("A");
const answerChoiceB = document.getElementById("B");
const answerChoiceC = document.getElementById("C");
const answerChoiceD = document.getElementById("D");
const counter = document.querySelector(".counter");
const timeGauge = document.querySelector(".time-gauge");
const progressContainer = document.querySelector(".progress-container");
const scoreContainer = document.querySelector(".score-container");
// Questions
let questions = [{
question: "How many different sounds can a cat make?",
questionImg: "img/1.jpg",
choiceA: "100",
choiceB: "150",
choiceC: "10",
choiceD: "27",
correctAnswer: "100",
},
{
question: "What breed of cat has a reputation for being cross-eyed?",
questionImg: "img/2.jpg",
choiceA: "Himalayan",
choiceB: "Egyptian Mau",
choiceC: "Siamese",
choiceD: "Persian",
correctAnswer: "Siamese",
},
{
question: "What is the most common training command taught to dogs?",
questionImg: "img/3.jpg",
choiceA: "Stay",
choiceB: "Sit",
choiceC: "Dance",
choiceD: "Roll",
correctAnswer: "Sit",
},
{
question: "What is a dog’s most highly developed sense?",
questionImg: "img/4.jpg",
choiceA: "Smell",
choiceB: "Sight",
choiceC: "Taste",
choiceD: "Touch",
correctAnswer: "Smell",
},
{
question: " How many known species of birds are there?",
questionImg: "img/5.jpg",
choiceA: "5,000",
choiceB: "10,000",
choiceC: "20,000",
choiceD: "40,000",
correctAnswer: "10,000",
},
{
question: "What evolutionary adaptation helps birds fly?",
questionImg: "img/6.jpg",
choiceA: "Rapid Digestion",
choiceB: "Beaks",
choiceC: "Hollow Bones",
choiceD: "All of These",
correctAnswer: "All of These",
},
{
question: "Which of the following is not one of the four remaining subspecies of elk in North America?",
questionImg: "img/7.jpg",
choiceA: "Manitoba Elk",
choiceB: "Highland Elk",
choiceC: "Rocky Mountain Elk",
choiceD: "Tule Elk",
correctAnswer: "Highland Elk",
},
{
question: "What is a baby elk called?",
questionImg: "img/8.jpg",
choiceA: "Bull",
choiceB: "Sow",
choiceC: "Cow",
choiceD: "Calf",
correctAnswer: "Calf",
},
{
question: "What do wolves use their scent for?",
questionImg: "img/9.jpg",
choiceA: "Marking Territory",
choiceB: "Finding Prey",
choiceC: "A Cover-up",
choiceD: "Nothing",
correctAnswer: "Marking Territory",
},
{
question: "If a wolf trespasses on the territory of other wolves, what will happen?",
questionImg: "img/10.jpg",
choiceA: "Nothing",
choiceB: "It will be accepted into the pack",
choiceC: "It will be chased or killed",
choiceD: "It will be required to present prey to the pack",
correctAnswer: "It will be chased or killed",
},
];
// Necessary variables
[activeQuestion, count, time] = [0, 0, 0];
[guageLength, timeUp, lastQuestion] = [800, 10, question.length - 1];
[gaugeUnit] = [guageLength / timeUp]
start.addEventListener("click", function(e) {
quiz.style.visibility = "visible";
start.style.visibility = "hidden";
app();
})
function renderQuiz() {
let q = questions[activeQuestion];
answerChoiceA.innerHTML = q.choiceA;
answerChoiceB.innerHTML = q.choiceB;
answerChoiceC.innerHTML = q.choiceC;
answerChoiceD.innerHTML = q.choiceD;
question.innerHTML = q.question;
document.body.style.backgroundImage = `url(${q.questionImg})`;
}
function gaugeFunction() {
if (count <= timeUp) {
timeGauge.style.width = `${count*gaugeUnit}px`
count++
} else {
count = 0;
}
}
function timeFunction() {
if (time <= timeUp) {
counter.innerHTML = time;
time++;
} else {
time = 0;
}
}
function progressSquareBoxes() {
lastQuestion = questions.length - 1;
for (var questionIndex = 0; questionIndex <= lastQuestion; questionIndex++) {
let newEl = document.createElement("div");
newEl.classList.add("progress-bar");
newEl.id = questionIndex;
newEl.innerText = questions[questionIndex].question;
progressContainer.appendChild(newEl)
}
}
app = () => {
renderQuiz();
setInterval(gaugeFunction, 1000);
setInterval(timeFunction, 1000);
progressSquareBoxes();
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
/* background-image: url("img/1.jpg"); */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.6;
}
.container {
height: 700px;
width: 1400px;
position: relative;
}
.start h1 {
font-weight: 100;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
background-color: #41444b;
padding: 20px 50px;
color: white;
}
.quiz {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-row-gap: 20px;
visibility: hidden;
}
.quiz>* {
display: flex;
align-items: center;
justify-content: center;
}
.question {
font-size: 35px;
letter-spacing: 2px;
background-color: rgba(247, 247, 247, 0.7);
place-self: center;
padding: 15px 30px;
text-align: center;
}
/* .quiz .question {
background-color: lightcyan;
} */
/* .quiz .choices {
background-color: lightsalmon;
} */
/* .quiz .timer {
background-color: lightskyblue;
} */
/* .quiz .progress {
background-color: lemonchiffon;
} */
/* Answer Choices */
.choices {
width: 100%;
justify-content: space-evenly;
}
.choice {
cursor: pointer;
background-color: rgba(27, 118, 141, 0.7);
padding: 7px 15px;
text-align: center;
color: white;
font-size: 20px;
height: 150px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Answer Timer */
.timer {
align-self: flex-end;
flex-direction: column;
}
.counter {
font-size: 40px;
width: 10px;
height: 10px;
color: rgb(27, 118, 141);
}
.time-gauge-bg,
.time-gauge {
position: absolute;
top: 78%;
left: 22%;
}
.time-gauge-bg {
height: 10px;
width: 800px;
background-color: lightgrey;
}
.time-gauge {
height: 10px;
background-color: rgb(179, 6, 247);
}
/* Progress Container */
.progress-bar {
height: 30px;
width: 30px;
background-color: lightgrey;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Project #22 - The Animal Trivia Quiz App</title>
</head>
<body>
<div class="container">
<div class="start">
<h1>Start</h1>
</div>
<div class="quiz">
<div class="question"></div>
<!-- Answer Choices -->
<div class="choices">
<div class="choice" id="A"></div>
<div class="choice" id="B"></div>
<div class="choice" id="C"></div>
<div class="choice" id="D"></div>
</div>
<!-- Answer Timer -->
<div class="timer">
<div class="counter"></div>
<div class="time-gauge-bg"></div>
<div class="time-gauge"></div>
<div class="dummy"></div>
</div>
<!-- Progress -->
<div class="progress-container"></div>
</div>
<!-- Score Container -->
<div class="score-container"></div>
</div>
<!-- ------------------------ -->
<!-- JS File -->
<script src="index.js"></script>
</body>
</html>
我创建了 progressSquareBoxes() 来动态创建新的 div，在该特定实例中有 10 个，然后将它们附加到“progressContainer”元素。我上周使用了这种方法，效果很好。现在没有创建 div。最重要的是，控制台甚至没有抛出错误，这使得查明我出错的地方变得更具挑战性。请帮忙。
const start = document.querySelector(".start");
const timer = document.querySelector(".timer");
const quiz = document.querySelector(".quiz");
const question = document.querySelector(".question");
const allAnswerChoices = document.querySelectorAll(".choice")
const answerChoiceA = document.getElementById("A");
const answerChoiceB = document.getElementById("B");
const answerChoiceC = document.getElementById("C");
const answerChoiceD = document.getElementById("D");
const counter = document.querySelector(".counter");
const timeGauge = document.querySelector(".time-gauge");
const progressContainer = document.querySelector(".progress-container");
const scoreContainer = document.querySelector(".score-container");
// Questions
let questions = [
{
question: "How many different sounds can a cat make?",
questionImg: "img/1.jpg",
choiceA: "100",
choiceB: "150",
choiceC: "10",
choiceD: "27",
correctAnswer: "100",
},
{
question: "What breed of cat has a reputation for being cross-eyed?",
questionImg: "img/2.jpg",
choiceA: "Himalayan",
choiceB: "Egyptian Mau",
choiceC: "Siamese",
choiceD: "Persian",
correctAnswer: "Siamese",
},
{
question: "What is the most common training command taught to dogs?",
questionImg: "img/3.jpg",
choiceA: "Stay",
choiceB: "Sit",
choiceC: "Dance",
choiceD: "Roll",
correctAnswer: "Sit",
},
{
question: "What is a dog’s most highly developed sense?",
questionImg: "img/4.jpg",
choiceA: "Smell",
choiceB: "Sight",
choiceC: "Taste",
choiceD: "Touch",
correctAnswer: "Smell",
},
{
question: " How many known species of birds are there?",
questionImg: "img/5.jpg",
choiceA: "5,000",
choiceB: "10,000",
choiceC: "20,000",
choiceD: "40,000",
correctAnswer: "10,000",
},
{
question: "What evolutionary adaptation helps birds fly?",
questionImg: "img/6.jpg",
choiceA: "Rapid Digestion",
choiceB: "Beaks",
choiceC: "Hollow Bones",
choiceD: "All of These",
correctAnswer: "All of These",
},
{
question:
"Which of the following is not one of the four remaining subspecies of elk in North America?",
questionImg: "img/7.jpg",
choiceA: "Manitoba Elk",
choiceB: "Highland Elk",
choiceC: "Rocky Mountain Elk",
choiceD: "Tule Elk",
correctAnswer: "Highland Elk",
},
{
question: "What is a baby elk called?",
questionImg: "img/8.jpg",
choiceA: "Bull",
choiceB: "Sow",
choiceC: "Cow",
choiceD: "Calf",
correctAnswer: "Calf",
},
{
question: "What do wolves use their scent for?",
questionImg: "img/9.jpg",
choiceA: "Marking Territory",
choiceB: "Finding Prey",
choiceC: "A Cover-up",
choiceD: "Nothing",
correctAnswer: "Marking Territory",
},
{
question:
"If a wolf trespasses on the territory of other wolves, what will happen?",
questionImg: "img/10.jpg",
choiceA: "Nothing",
choiceB: "It will be accepted into the pack",
choiceC: "It will be chased or killed",
choiceD: "It will be required to present prey to the pack",
correctAnswer: "It will be chased or killed",
},
];
// Necessary variables
[activeQuestion, count, time] = [0, 0, 0];
[guageLength, timeUp, lastQuestion] = [800, 10, question.length-1];
[gaugeUnit] = [guageLength / timeUp]
start.addEventListener("click", function(e) {
quiz.style.visibility = "visible";
start.style.visibility = "hidden";
app();
})
function renderQuiz() {
let q = questions[activeQuestion];
answerChoiceA.innerHTML = q.choiceA;
answerChoiceB.innerHTML = q.choiceB;
answerChoiceC.innerHTML = q.choiceC;
answerChoiceD.innerHTML = q.choiceD;
question.innerHTML = q.question;
document.body.style.backgroundImage = `url(${q.questionImg})`;
}
function gaugeFunction () {
if(count <= timeUp) {
timeGauge.style.width = `${count*gaugeUnit}px`
count++
} else {
count = 0;
}
}
function timeFunction() {
if(time <= timeUp) {
counter.innerHTML = time;
time++;
} else {
time = 0;
}
}
function progressSquareBoxes() {
for(var questionIndex = 0; questionIndex <= lastQuestion; questionIndex++) {
let newEl = document.createElement("div");
newEl.setAttribute("class", "progress-bar");
newEl.setAttribute("id", questionIndex);
progressContainer.appendChild(newEl)
}
}
app = () => {
renderQuiz();
setInterval(gaugeFunction, 1000);
setInterval(timeFunction, 1000);
progressSquareBoxes();
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
/* background-image: url("img/1.jpg"); */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.6;
}
.container {
height: 700px;
width: 1400px;
position: relative;
}
.start h1 {
font-weight: 100;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
background-color: #41444b;
padding: 20px 50px;
color: white;
}
.quiz {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-row-gap: 20px;
visibility: hidden;
}
.quiz > * {
display: flex;
align-items: center;
justify-content: center;
}
.question {
font-size: 35px;
letter-spacing: 2px;
background-color: rgba(247, 247, 247, 0.7);
place-self: center;
padding: 15px 30px;
text-align: center;
}
/* .quiz .question {
background-color: lightcyan;
} */
/* .quiz .choices {
background-color: lightsalmon;
} */
/* .quiz .timer {
background-color: lightskyblue;
} */
/* .quiz .progress {
background-color: lemonchiffon;
} */
/* Answer Choices */
.choices {
width: 100%;
justify-content: space-evenly;
}
.choice {
cursor: pointer;
background-color: rgba(27, 118, 141, 0.7);
padding: 7px 15px;
text-align: center;
color: white;
font-size: 20px;
height: 150px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Answer Timer */
.timer {
align-self: flex-end;
flex-direction: column;
}
.counter {
font-size: 40px;
width: 10px;
height: 10px;
color: rgb(27, 118, 141);
}
.time-gauge-bg,
.time-gauge {
position: absolute;
top: 78%;
left: 22%;
}
.time-gauge-bg {
height: 10px;
width: 800px;
background-color: lightgrey;
}
.time-gauge {
height: 10px;
background-color: rgb(179, 6, 247);
}
/* Progress Container */
.progress-bar {
height: 30px;
width: 30px;
background-color: lightgrey;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Project #22 - The Animal Trivia Quiz App</title>
</head>
<body>
<div class="container">
<div class="start">
<h1>Start</h1>
</div>
<div class="quiz">
<div class="question"></div>
<!-- Answer Choices -->
<div class="choices">
<div class="choice" id="A"></div>
<div class="choice" id="B"></div>
<div class="choice" id="C"></div>
<div class="choice" id="D"></div>
</div>
<!-- Answer Timer -->
<div class="timer">
<div class="counter"></div>
<div class="time-gauge-bg"></div>
<div class="time-gauge"></div>
<div class="dummy"></div>
</div>
<!-- Progress -->
<div class="progress-container"></div>
</div>
<!-- Score Container -->
<div class="score-container"></div>
</div>
<!-- ------------------------ -->
<!-- JS File -->
<script src="index.js"></script>
</body>
</html>
主要问题来自方法 progressSquareBoxes()，其中 lastQuestion 未定义，因此它从未进入 for 循环
一个建议可以是使用问题数组的最后一个索引来恢复 lastQuestions
lastQuestion = questions.length - 1;
const start = document.querySelector(".start");
const timer = document.querySelector(".timer");
const quiz = document.querySelector(".quiz");
const question = document.querySelector(".question");
const allAnswerChoices = document.querySelectorAll(".choice")
const answerChoiceA = document.getElementById("A");
const answerChoiceB = document.getElementById("B");
const answerChoiceC = document.getElementById("C");
const answerChoiceD = document.getElementById("D");
const counter = document.querySelector(".counter");
const timeGauge = document.querySelector(".time-gauge");
const progressContainer = document.querySelector(".progress-container");
const scoreContainer = document.querySelector(".score-container");
// Questions
let questions = [{
question: "How many different sounds can a cat make?",
questionImg: "img/1.jpg",
choiceA: "100",
choiceB: "150",
choiceC: "10",
choiceD: "27",
correctAnswer: "100",
},
{
question: "What breed of cat has a reputation for being cross-eyed?",
questionImg: "img/2.jpg",
choiceA: "Himalayan",
choiceB: "Egyptian Mau",
choiceC: "Siamese",
choiceD: "Persian",
correctAnswer: "Siamese",
},
{
question: "What is the most common training command taught to dogs?",
questionImg: "img/3.jpg",
choiceA: "Stay",
choiceB: "Sit",
choiceC: "Dance",
choiceD: "Roll",
correctAnswer: "Sit",
},
{
question: "What is a dog’s most highly developed sense?",
questionImg: "img/4.jpg",
choiceA: "Smell",
choiceB: "Sight",
choiceC: "Taste",
choiceD: "Touch",
correctAnswer: "Smell",
},
{
question: " How many known species of birds are there?",
questionImg: "img/5.jpg",
choiceA: "5,000",
choiceB: "10,000",
choiceC: "20,000",
choiceD: "40,000",
correctAnswer: "10,000",
},
{
question: "What evolutionary adaptation helps birds fly?",
questionImg: "img/6.jpg",
choiceA: "Rapid Digestion",
choiceB: "Beaks",
choiceC: "Hollow Bones",
choiceD: "All of These",
correctAnswer: "All of These",
},
{
question: "Which of the following is not one of the four remaining subspecies of elk in North America?",
questionImg: "img/7.jpg",
choiceA: "Manitoba Elk",
choiceB: "Highland Elk",
choiceC: "Rocky Mountain Elk",
choiceD: "Tule Elk",
correctAnswer: "Highland Elk",
},
{
question: "What is a baby elk called?",
questionImg: "img/8.jpg",
choiceA: "Bull",
choiceB: "Sow",
choiceC: "Cow",
choiceD: "Calf",
correctAnswer: "Calf",
},
{
question: "What do wolves use their scent for?",
questionImg: "img/9.jpg",
choiceA: "Marking Territory",
choiceB: "Finding Prey",
choiceC: "A Cover-up",
choiceD: "Nothing",
correctAnswer: "Marking Territory",
},
{
question: "If a wolf trespasses on the territory of other wolves, what will happen?",
questionImg: "img/10.jpg",
choiceA: "Nothing",
choiceB: "It will be accepted into the pack",
choiceC: "It will be chased or killed",
choiceD: "It will be required to present prey to the pack",
correctAnswer: "It will be chased or killed",
},
];
// Necessary variables
[activeQuestion, count, time] = [0, 0, 0];
[guageLength, timeUp, lastQuestion] = [800, 10, question.length - 1];
[gaugeUnit] = [guageLength / timeUp]
start.addEventListener("click", function(e) {
quiz.style.visibility = "visible";
start.style.visibility = "hidden";
app();
})
function renderQuiz() {
let q = questions[activeQuestion];
answerChoiceA.innerHTML = q.choiceA;
answerChoiceB.innerHTML = q.choiceB;
answerChoiceC.innerHTML = q.choiceC;
answerChoiceD.innerHTML = q.choiceD;
question.innerHTML = q.question;
document.body.style.backgroundImage = `url(${q.questionImg})`;
}
function gaugeFunction() {
if (count <= timeUp) {
timeGauge.style.width = `${count*gaugeUnit}px`
count++
} else {
count = 0;
}
}
function timeFunction() {
if (time <= timeUp) {
counter.innerHTML = time;
time++;
} else {
time = 0;
}
}
function progressSquareBoxes() {
lastQuestion = questions.length - 1;
for (var questionIndex = 0; questionIndex <= lastQuestion; questionIndex++) {
let newEl = document.createElement("div");
newEl.classList.add("progress-bar");
newEl.id = questionIndex;
newEl.innerText = questions[questionIndex].question;
progressContainer.appendChild(newEl)
}
}
app = () => {
renderQuiz();
setInterval(gaugeFunction, 1000);
setInterval(timeFunction, 1000);
progressSquareBoxes();
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
/* background-image: url("img/1.jpg"); */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.6;
}
.container {
height: 700px;
width: 1400px;
position: relative;
}
.start h1 {
font-weight: 100;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
background-color: #41444b;
padding: 20px 50px;
color: white;
}
.quiz {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-row-gap: 20px;
visibility: hidden;
}
.quiz>* {
display: flex;
align-items: center;
justify-content: center;
}
.question {
font-size: 35px;
letter-spacing: 2px;
background-color: rgba(247, 247, 247, 0.7);
place-self: center;
padding: 15px 30px;
text-align: center;
}
/* .quiz .question {
background-color: lightcyan;
} */
/* .quiz .choices {
background-color: lightsalmon;
} */
/* .quiz .timer {
background-color: lightskyblue;
} */
/* .quiz .progress {
background-color: lemonchiffon;
} */
/* Answer Choices */
.choices {
width: 100%;
justify-content: space-evenly;
}
.choice {
cursor: pointer;
background-color: rgba(27, 118, 141, 0.7);
padding: 7px 15px;
text-align: center;
color: white;
font-size: 20px;
height: 150px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Answer Timer */
.timer {
align-self: flex-end;
flex-direction: column;
}
.counter {
font-size: 40px;
width: 10px;
height: 10px;
color: rgb(27, 118, 141);
}
.time-gauge-bg,
.time-gauge {
position: absolute;
top: 78%;
left: 22%;
}
.time-gauge-bg {
height: 10px;
width: 800px;
background-color: lightgrey;
}
.time-gauge {
height: 10px;
background-color: rgb(179, 6, 247);
}
/* Progress Container */
.progress-bar {
height: 30px;
width: 30px;
background-color: lightgrey;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Project #22 - The Animal Trivia Quiz App</title>
</head>
<body>
<div class="container">
<div class="start">
<h1>Start</h1>
</div>
<div class="quiz">
<div class="question"></div>
<!-- Answer Choices -->
<div class="choices">
<div class="choice" id="A"></div>
<div class="choice" id="B"></div>
<div class="choice" id="C"></div>
<div class="choice" id="D"></div>
</div>
<!-- Answer Timer -->
<div class="timer">
<div class="counter"></div>
<div class="time-gauge-bg"></div>
<div class="time-gauge"></div>
<div class="dummy"></div>
</div>
<!-- Progress -->
<div class="progress-container"></div>
</div>
<!-- Score Container -->
<div class="score-container"></div>
</div>
<!-- ------------------------ -->
<!-- JS File -->
<script src="index.js"></script>
</body>
</html>