How do I get the index of two variables, compare them, and return true or false

I am making a trivia game that uses an array of objects.

const questions = [
    {
        question: 'What year did the United State become independent?',
        answers: [
          { text: '1776', correct: true },
          { text: '1676', correct: false },
          { text: '1576', correct: false },
          { text: '1876', correct: false }
        ]
      },

I think the correct way is to get the index of the correct answer by using .find, getting the the index of the selected answer, then use an if statement to compare the two. If they match then the console will log “correct” or “incorrect” otherwise. I am having trouble getting the index of corretAnswer and also selectedAnswer.

When I use this code and console log it, both variables return undefined.

const answerButtons = document.querySelectorAll('.answers-btn');

function checkAnswer() {

  let correctAnswer = randomQuestion.answers.find((answer, index) => {
    return answer[index] === true;
  })

  answerButtons.forEach((answerButton, index) => {
    answerButton.addEventListener('click', () => {
      let selectedAnswer = answerButton[index];
      return selectedAnswer;
    })
  })
}

<button id="answers-btn-1" onclick="checkAnswer()" class="answers-btn"></button>
<button id="answers-btn-2" onclick="checkAnswer()" class="answers-btn"></button>
<button id="answers-btn-3" onclick="checkAnswer()" class="answers-btn"></button>
<button id="answers-btn-4" onclick="checkAnswer()" class="answers-btn"></button>

Answer

I tried to create a solution with as least code possible. First, you don’t need to add an event listener to each button, you could just make each call a specific index from HTML. Secondly, since you are creating your answers list with a correct property, you don’t need to iterate it. Just get the one the user selected and check the property.

Hope it helps.

const currentQuestion = 0;

const questions = [{
  question: 'What year did the United State become independent?',
  answers: [{
      text: '1776',
      correct: true
    },
    {
      text: '1676',
      correct: false
    },
    {
      text: '1576',
      correct: false
    },
    {
      text: '1876',
      correct: false
    }
  ]
}]

function checkAnswer(bntIndex) {
  let answer = questions[currentQuestion].answers[bntIndex];
  console.log(answer.correct)
}

<button id="answers-btn-1" onclick="checkAnswer(0)" class="answers-btn">1</button>
<button id="answers-btn-2" onclick="checkAnswer(1)" class="answers-btn">2</button>
<button id="answers-btn-3" onclick="checkAnswer(2)" class="answers-btn">3</button>
<button id="answers-btn-4" onclick="checkAnswer(3)" class="answers-btn">4</button>