Increment index by click event listener only up to length of array

Question

I am incrementing an i count by defining the length of the array of objects, but the current condition is not working as expected (if (i < questions.length){})

let questions = [
  {
    question: 'This is question one?',
    answerOne: 'Answer One 1',
    answerTwo: 'Answer Two 1',
  },
  {
    question: 'This is question Two?',
    answerOne: 'Answer One 2',
    answerTwo: 'Answer Two 2',
  },
  {
    question: 'This is question Three?',
    answerOne: 'Answer One 3 ',
    answerTwo: 'Answer Two 3',
  },
  {
    question: 'This is question Four?',
    answerOne: 'Answer One 4 ',
    answerTwo: 'Answer Two 4',
  },
];

const yesBtn = document.querySelector ('#answer1');
const noBtn = document.querySelector ('#answer2');
const startBtn = document.querySelector ('#start');
const answersDiv = document.querySelector ('.answers');
const mainDiv = document.getElementById ('main');
let answer1Count = 0;
let answer2Count = 0;

const genHtml = () => {
  let innerDiv = '';
  for (let i = 0; i < 1; i++) {
    console.log (questions[i].question, i);
    innerDiv += `${questions[0].question}`;

    if (answersDiv) {
      answersDiv.style.display = 'block';
      yesBtn.innerHTML = `${questions[0].answerOne}`;
      noBtn.innerHTML = `${questions[0].answerTwo}`;
    }

    if (yesBtn) {
      yesBtn.addEventListener ('click', () => { 
          if (i < questions.length) {
          i++;
          console.log (questions[i].question, i);
          answer1Count++;
          console.log ('answer 1 count =' + answer1Count);
          const mainDiv = (document.getElementById (
            'main'
          ).innerHTML = `${questions[i].question}
          `);
          yesBtn.innerHTML = `${questions[i].answerOne}`;
        }
      });
    }
  }
  return innerDiv;
};

Error: Uncaught TypeError: Cannot read property 'question' of undefined

I know it's getting the error because i is still trying to increment, so the condition is not working?

So If I wanted to increment an array of objects by click event, what would be the best way? — Sole
– Sole, Commented Mar 16, 2021 at 1:06
Just declare let i=0 inside the function. It can still be incremented inside the event handler — charlietfl
– charlietfl, Commented Mar 16, 2021 at 1:07

xdhmoore · Accepted Answer · 2021-03-16 01:04:25Z

2

I agree with the comment that a for loop with i < 1 is confusing. I don't understand what you are doing, but it does appear that your condition should be i < questions.length - 1, or you should move the i++ to the end of the function.

As it currently stands, the code tests for a condition, immediately increments i to break the condition, then tries to use i.

answered Mar 16, 2021 at 1:04

xdhmoore

10.2k12 gold badges57 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sole Over a year ago

So If I wanted to increment an array of objects by click event, what would be the best way?

xdhmoore Over a year ago

I suppose you could still create a global counter right above your addEventlistener call.

Collectives™ on Stack Overflow

Increment index by click event listener only up to length of array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related