how to access the object in my array on function call

Question

I created an array of objects with different properties but I am having problem displaying each properties of my object on the webpage. I have tried but I don't know where the problem is.

I have tried to access the objects individually but still not working please check the problem

//Get the id's of all elements
const intro = document.getElementById("introduction");
const continued = document.getElementById("continue");
const name = document.getElementById("name").value;
const wel = document.getElementById("wel")
const startt = document.getElementById("startt");
const start = document.getElementById("start");
const quiz = document.getElementById("quiz");
const question = document.getElementById("question");
const qImg = document.getElementById("qImg");
const choiceA = document.getElementById("A");
const choiceB = document.getElementById("B");
const choiceC = document.getElementById("C");
const choiceD = document.getElementById("D");
const counter = document.getElementById("counter");
const timeGauge = document.getElementById("timeGauge");
const progress = document.getElementById("progress");
const scoreDiv = document.getElementById("scoreContainer");

//Event listeners
continued.addEventListener('click', continueAfterIntro);
start.addEventListener('click', startQuiz);

//variable declarations
const lastQuestion = questions.length - 1;
var runningQuestion = 0;
var secs = 0;
var mins = 0;
var hrs = 0;
const questionTime = 60; // 60s
const gaugeWidth = 180; // 180px
const gaugeUnit = gaugeWidth / questionTime;
let TIMER;
let score = 0;

//Array object declaration
let questions = [{
  question: "Who is the president Nigeria?",
  choiceA: "Muhamadu Buhari",
  choiceB: "Osibajo",
  choiceC: "Obasanjo",
  choiceD: "Green,Red,Green",
  correct: "A"
}, {
  question: "Who is the governor of oyo state?",
  choiceA: "Abiola Ajumobi",
  choiceB: "Seyi makinde",
  choiceC: "Alao Akala",
  choiceD: "Green,Red,Green",
  correct: "B"
}, {
  question: "What are the colors of the Nigerian Flag?",
  choiceA: "Green,White,Blue",
  choiceB: "Blue,White,Green",
  choiceC: "Green,White,Green",
  choiceD: "Green,Red,Green",
  correct: "C"
}];

function continueAfterIntro() {
  intro.style.display = 'none';
  startt.style.display = 'block';
  wel.innerHTML = `Hi ${name}`;
}

function renderQuestion() {
  let q = questions[runningQuestion];
  question.innerHTML = "<p>" + q.question + "</p>";
  choiceA.innerHTML = q.choiceA;
  choiceB.innerHTML = q.choiceB;
  choiceC.innerHTML = q.choiceC;
}

function startQuiz() {
  startt.style.display = "none";
  quiz.style.display = "block";
  renderQuestion();
}

<div id="container">
  <div class="" id="introduction">
    <div id="pimg"><img src="pic/thumbs.png" alt="WELCOME FACE"></div>
    <div id="para1">
      <p>Hey there i'm AFO by name whats yours</p>
    </div>
    <div id="name-button">
      <span id="iName"><input type="text" id="name" placeholder="Type Your Name Here"></span>
      <span id="continue"><input type="button" value="Continue" id="continue"></span>
    </div>
  </div>
  <div id="startt" style="display: none">
    <p id="wel"></p>
    <div id="start">Start Quiz!</div>
  </div>
  <div id="quiz" style="display: none">
    <div id="question"></div>
    <div id="choices">
      A.
      <div class="choice" id="A" onclick="checkAnswer('A')"></div>
      B.
      <div class="choice" id="B" onclick="checkAnswer('B')"></div>
      C.
      <div class="choice" id="C" onclick="checkAnswer('C')"></div>
      D.
      <div class="choice" id="D" onclick="checkAnswer('D')"></div>
    </div>
    <div id="timer">
      <div id="counter"></div>
      <div id="btimeGauge"></div>
      <div id="timeGauge"></div>
    </div>
    <div id="progress"></div>
  </div>
  <div id="scoreContainer" style="display: none"></div>
</div>

The function renderQuestion should display the questions and the choices on the webpage

Marko Savic · Accepted Answer · 2019-05-28 12:24:35Z

When i run your project i got ReferenceError.

Uncaught ReferenceError: Cannot access 'questions' before initialization

That means you can't play around with Questions Array before initialization. For example:

const questionsLength = questions.length;  // REFERENCE ERROR.
const questions = ['a', 'b', 'c'];
console.log(questionsLength);

Declare Questions Array before you inspect length:

const questions = ['a', 'b', 'c'];
const questionsLength = questions.length;
console.log(questionsLenght) // Returns 3

Working example:

//Get the id's of all elements
const intro = document.getElementById("introduction");
const continued = document.getElementById("continue");
const name = document.getElementById("name").value;
const wel = document.getElementById("wel")
const startt = document.getElementById("startt");
const start = document.getElementById("start");
const quiz = document.getElementById("quiz");
const question = document.getElementById("question");
const qImg = document.getElementById("qImg");
const choiceA = document.getElementById("A");
const choiceB = document.getElementById("B");
const choiceC = document.getElementById("C");
const choiceD = document.getElementById("D");
const counter = document.getElementById("counter");
const timeGauge = document.getElementById("timeGauge");
const progress = document.getElementById("progress");
const scoreDiv = document.getElementById("scoreContainer");

//Event listeners
continued.addEventListener('click',continueAfterIntro);
start.addEventListener('click',startQuiz);


//Array object declaration
let questions = [
    {
        question : "Who is the president Nigeria?",
        choiceA : "Muhamadu Buhari",
        choiceB : "Osibajo",
        choiceC : "Obasanjo",
        choiceD : "Green,Red,Green",
        correct : "A"
    },{
        question : "Who is the governor of oyo state?",
        choiceA : "Abiola Ajumobi",
        choiceB : "Seyi makinde",
        choiceC : "Alao Akala",
        choiceD : "Green,Red,Green",
        correct : "B"
    },{
        question : "What are the colors of the Nigerian Flag?",
        choiceA : "Green,White,Blue",
        choiceB : "Blue,White,Green",
        choiceC : "Green,White,Green",
        choiceD : "Green,Red,Green",
        correct : "C"
    }
];
//variable declarations
const lastQuestion = questions.length - 1;
var runningQuestion = 0;
var secs = 0;
var mins = 0;
var hrs = 0;
const questionTime = 60; // 60s
const gaugeWidth = 180; // 180px
const gaugeUnit = gaugeWidth / questionTime;
let TIMER;
let score = 0;

function continueAfterIntro(){
    intro.style.display = 'none';
    startt.style.display = 'block';
    wel.innerHTML = `Hi ${name}`;
}

function renderQuestion(){
    let q = questions[runningQuestion];
    question.innerHTML = "<p>"+ q.question +"</p>";
    choiceA.innerHTML = q.choiceA;
    choiceB.innerHTML = q.choiceB;
    choiceC.innerHTML = q.choiceC;
}

function startQuiz(){
    startt.style.display = "none";
    quiz.style.display = "block";
    renderQuestion();
}

<!DOCTYPE html>
<html lang="en">
<head>
        <link rel="stylesheet" href="quiz.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <div id="container">
                    <div class="" id="introduction">
                        <div id="pimg"><img src="pic/thumbs.png" alt="WELCOME FACE"></div>
                        <div id="para1"><p>Hey there i'm AFO by name whats yours</p> </div>
                        <div id="name-button">
                        <span id="iName"><input type="text" id="name" placeholder="Type Your Name Here"></span>
                        <span id="continue"><input type="button" value="Continue" id="continue"></span>
                    </div>
                    </div>
                    <div id="startt" style="display: none">
                        <p id="wel"></p>
                <div id="start" >Start Quiz!</div>
            </div>
                <div id="quiz" style="display: none">
                    <div id="question"></div>
                    <div id="choices">
                       A.<div class="choice" id="A" onclick="checkAnswer('A')"></div>
                       B.<div class="choice" id="B" onclick="checkAnswer('B')"></div>
                       C.<div class="choice" id="C" onclick="checkAnswer('C')"></div>
                       D.<div class="choice" id="D" onclick="checkAnswer('D')"></div>
                    </div>
                    <div id="timer">
                            <div id="counter"></div>
                            <div id="btimeGauge"></div>
                            <div id="timeGauge"></div>
                        </div>
                    <div id="progress"></div>
                </div>
                <div id="scoreContainer" style="display: none"></div>
            </div>
</body>
</html>

What ReferenceError mean MDN#ReferenceError

The key is to declare Questions Array at the top! See again my answer.

Collectives™ on Stack Overflow

how to access the object in my array on function call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related