Why is my function not dynamically creating new elements?-CodePudding

I've created progressSquareBoxes() to dynamically create new divs, 10 in that particular instance, and then append them to the "progressContainer" element. I used that approach last week and it was working just fine. Now no divs are created. On top of that the console isn't even throwing an error, which makes it even more challenging to pin point where I've gone wrong. Help, please.

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 >
      <div >
        <h1>Start</h1>
      </div>

      <div >
        <div ></div>

        <!-- Answer Choices -->
        <div >
          <div  id="A"></div>
          <div  id="B"></div>
          <div  id="C"></div>
          <div  id="D"></div>
        </div>

        <!-- Answer Timer -->
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
          <div ></div>
        </div>

        <!-- Progress -->
        <div ></div>
      </div>

      <!-- Score Container -->
      <div ></div>
    </div>
    <!-- ------------------------ -->
    <!-- JS File -->
    <script src="index.js"></script>
  </body>
</html>

CodePudding user response：

the main issue come from method progressSquareBoxes() where lastQuestion is not define so it never entered the for loop

one proposal can be to recover lastQuestions by using the last index of questions array

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 >
    <div >
      <h1>Start</h1>
    </div>

    <div >
      <div ></div>

      <!-- Answer Choices -->
      <div >
        <div  id="A"></div>
        <div  id="B"></div>
        <div  id="C"></div>
        <div  id="D"></div>
      </div>

      <!-- Answer Timer -->
      <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
      </div>

      <!-- Progress -->
      <div ></div>
    </div>

    <!-- Score Container -->
    <div ></div>
  </div>
  <!-- ------------------------ -->
  <!-- JS File -->
  <script src="index.js"></script>
</body>

</html>