CODEWITHSUNDEEP
javascriptarraysobjectmethods
Ivan
Ivan

Reputation: 45

IndexOf returns undesirable -1

I have an array consisting of JavaScript objects. Each time an object is called in my initQuestion function, I want to find the index of the object within the array. I am using the .indexOf array method to try and find the index, unfortunately, the indexOf method is returning -1 which is not the desired effect.

I also have a random function that is randomly selecting an object from the array, could this be the reason why I am finding it difficult to use the indexOf function?

/// Quiz Night (Who Wants to be A Millionaire Version)
(function() {
  function Quiz(question, options, answer) {
    this.question = question;
    this.options = options;
    this.answer = answer;
  };

  // let displayQuestion = document.getElementById('question_text');
  // displayQuestion.innerHTML = "test";

// HTML Selectors declerations 
  let headingQuestion, ul, displayAnswer, quizForm;
  headingQuestion = document.getElementById('question');
  ul = document.getElementById('question_text');
  displayAnswer = document.getElementById('display_answer');
  quizForm = document.getElementById('quizForm');

Quiz.prototype.initQuestion = function() {
    headingQuestion.innerHTML = this.question;
    for (let i = 0; i < this.options.length; i++) {
      ul.innerHTML += `<li>${i}: ${this.options[i]}</li>`;
    };

    quizForm.addEventListener("submit", (e) => {
      e.preventDefault();
      let textAnswer = document.getElementById('textAnswer').value;
      let userAnswer = parseInt(textAnswer);
      if (userAnswer === this.answer) {
        displayAnswer.innerHTML = `\n${this.options[userAnswer]}, is the correct Answer`;
      } else {
        displayAnswer.innerHTML = `\n${this.options[userAnswer]} is incorrect.`;
      };

      console.log(allQuestions.indexOf(this.question));
    });
  };

  // Store quiz questions in a array or data table. 
  let q1 = new Quiz("Which one of the following names was not a member of the famous English rock band 'The Beatles'?", ['Rod Stewart', 'Ringo Starr', 'George Harrison', 'Paul McCartney'], 0);
  let q2 = new Quiz("Which US state is known as the Grand Canyon State?", ['Arkansas', 'Arizona', 'Colorado', 'Massachusetts'], 1);
  let q3 = new Quiz("What is the smallest country in the world?", ['Monaco', 'Singapore', 'Vatican', 'Fiji'], 2);
  let q4 = new Quiz("Choose the world's deepest river?", ['Amazon River', 'Yangtze River', 'Nile River', 'Congo River'], 3);

  let allQuestions = [
    q1,
    q2,
    q3,
    q4
  ];

  let n = Math.floor(Math.random() * allQuestions.length);
  allQuestions[n].initQuestion();
})();
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Bootstrap Link -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <!--Custom style sheet -->
  <link rel="stylesheet" href="style.css">


  <!--Bootstrap Javascript-->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


  <title>Section Five</title>

</head>

<body>
  <div class="container">
    <div class="row">
      <h1></h1>
    </div>
    <div class="row">
      <h3 id="question"></h3>
    </div>
    <div class="row">
      <ul id="question_text">
        <!--For Loop insert here-->
      </ul>
    </div>
    <div class="row">
      <p id="display_answer"></p>
    </div>
    <form id="quizForm" class="quizForm">
      <div class="form-group">
        <input type="text" id="textAnswer">
      </div>
      <button type="submit">Submit</button>
    </form>
    <button type="button">Next Question</button>
  </div>
</body>

<script src="app.js"></script>

</html>

Upvotes: 0

Views: 50

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074385

The entries in allQuestions are Quiz instances, but this.question is a string, so you're comparing apples and oranges. You probably want:

const index = allQuestions.indexOf(this);

(Perhaps call it allQuizzes instead?)

Or to just know whether it's there:

const found = allQuizzes.includes(this);

Alternatively, if you want to find the Quiz instance in allQuizzes that has the matching question, use find rather than indexOf:

const quiz = allQuizzes.find(({question}) => question === this.question);

(Or use findIndex to find its index.)

Upvotes: 2

Barmar
Barmar

Reputation: 781058

this.question is the text of the question (a string), but allQuestions is an array of Quiz objects, not strings.

Since this is a Quiz object, you should search for that in the array:

console.log(allQuestions.indexOf(this));

Upvotes: 1

Related Questions