IF语句给出正确的值但错误的消息

Question

我正在测验。当我单击第一个问题的正确答案时，我得到“正确”消息并添加了要点。关于其他问题，当我单击正确的答案时，它会显示“错误”消息，但总分会增加10分。我不明白为什么它会在IF语句中添加点，但是我得到了错误的消息。

这是我的代码：

const questions = [{
    question: "What's Beyonce's middle name?",
    answers: ["Maria", "Giselle"],
    correct: 'Giselle'
  },
  {
    question: "How many children does she have",
    answers: [1, 2, 3],
    correct: 3
  },
  {
    question: "What's Beyonce's husband name?",
    answers: ["Phil", "Greg", "Jay-Z"],
    correct: 'Jay-Z'
  },
  {
    question: "How old is Beyonce",
    answers: [34, 45, 27, 37],
    correct: 37
  }
]

questions.map(question => {
  let quest = `
        <p ><span class="number"></span> ${question.question}</p>
        `;
  document.querySelector('.question').insertAdjacentHTML('afterBegin', quest);
  question.answers.map(ans => {
    let answer = `
        <ul class ="answers">
        <li class="answer">${ans}</li>
        </ul>
        `;
    document.querySelector('p').insertAdjacentHTML('afterEnd', answer);
  })
})

let number = 0;
document.querySelector('.score').textContent = number;
questions.forEach(quest => {
  document.querySelector('.question').addEventListener('click', (e) => {
    if (e.target.className === 'answer') {
      if (e.target.innerText == quest.correct) {
        number += 10;
        document.querySelector('.score').textContent = number;
        document.querySelector('.message').textContent = 'Correct';
      } else {
        document.querySelector('.message').textContent = 'Wrong';
      }
    }
  })
})

<header>
  <h1>Beehive Quiz</h1>
  <h1 class="score"></h1>
  <h4 class="message"></h4>
</header>
<div class="container">
  <div class="questions">
    <h2>On With The Questions...</h2>
    <div class="question"></div>
  </div>
</div>
<script src="app.js"></script>