title: Javascript addEventListener click problem
body: <p>There is a problem that I have been dealing with for 2 days but could not solve.
  I am creating a quiz app where you can choose from 4 options.
  The program works correctly when I make the first choice.
  but when I make the second choice it reacts as if I clicked it twice.
  When I make the third choice it reacts as if I clicked it 3 times.
  <a href="https://i.stack.imgur.com/VtPhE.png" rel="nofollow noreferrer">I only made two choices, but the program makes it look like I made 3 choices.</a></p>
  <p>HTML Code</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/src/ionicons.min.css&quot;&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Quiz APP&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container game&quot;&gt;
          &lt;div class=&quot;true-false-line&quot;&gt;
              &lt;span&gt;&lt;i class=&quot;ion-checkmark&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-checkmark&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-close&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-ios-circle-outline small&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-ios-circle-outline small&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-ios-circle-outline small&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-ios-circle-outline small&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-ios-circle-outline small&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-ios-circle-outline small&quot;&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;&lt;i class=&quot;ion-ios-circle-outline small&quot;&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class=&quot;question-title&quot;&gt;
              &lt;p&gt;What is the image storage solution that is part of Docker Enterprise Edition called?&lt;/p&gt;
  
          &lt;/div&gt;
          &lt;div class=&quot;question-number&quot;&gt;
              &lt;span&gt;10&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class=&quot;choices&quot;&gt;
              &lt;div class=&quot;choice&quot;&gt;Trusted Refisrty&lt;/div&gt;
              &lt;div class=&quot;choice&quot;&gt;Docker Degister&lt;/div&gt;
              &lt;div class=&quot;choice&quot;&gt;Docker Hub&lt;/div&gt;
              &lt;div class=&quot;choice&quot;&gt;Universal COntrol Plane&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>JS Code</p>
  <pre><code>//DOM Objects
  const TFLine = document.querySelector(&quot;.true-false-line&quot;);
  const questionTitle = document.querySelector(&quot;.question-title&quot;);
  const questionNumber = document.querySelector(&quot;.question-number&quot;);
  const choices = document.querySelector(&quot;.choices&quot;);
  const choice = document.querySelectorAll(&quot;.choice&quot;);
  const container = document.querySelector(&quot;.container&quot;);
  
  //Questions
  const questions = [
      {
          title: &quot;1Scoville ölçeği hangisini ölçer?&quot;,
          choice: [
              &quot;Deniz tuzluluğunu&quot;,
              &quot;Çikolata tatlılığını&quot;,
              &quot;Limon ekşiliğini&quot;,
              &quot;Biber acılığını&quot;
          ],
          trueChoice: &quot;Biber acılığını&quot;
      }
      ,
      {
          title: &quot;2aumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu Tepesi nerededir?&quot;,
          choice: [
              &quot;Hawai&quot;,
              &quot;Yeni Zelanda&quot;,
              &quot;Galler&quot;,
              &quot;Hindistan&quot;
          ],
          trueChoice: &quot;Yeni Zelanda&quot;
      },
      {
          title: &quot;3Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?&quot;,
          choice: [
              &quot;Burnuma göre&quot;,
              &quot;Kaşıma göre&quot;,
              &quot;Bıyığıma göre&quot;,
              &quot;Kafama göre&quot;
          ],
          trueChoice: &quot;Yeni Zelanda&quot;
      }, {
          title: &quot;4Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?&quot;,
          choice: [
              &quot;Burnuma göre&quot;,
              &quot;Kaşıma göre&quot;,
              &quot;Bıyığıma göre&quot;,
              &quot;Kafama göre&quot;
          ],
          trueChoice: &quot;Yeni Zelanda&quot;
      },
      {
          title: &quot;5Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?&quot;,
          choice: [
              &quot;Burnuma göre&quot;,
              &quot;Kaşıma göre&quot;,
              &quot;Bıyığıma göre&quot;,
              &quot;Kafama göre&quot;
          ],
          trueChoice: &quot;Yeni Zelanda&quot;
      },
      {
          title: &quot;6Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?&quot;,
          choice: [
              &quot;Burnuma göre&quot;,
              &quot;Kaşıma göre&quot;,
              &quot;Bıyığıma göre&quot;,
              &quot;Kafama göre&quot;
          ],
          trueChoice: &quot;Yeni Zelanda&quot;
      },
      {
          title: &quot;7Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?&quot;,
          choice: [
              &quot;Burnuma göre&quot;,
              &quot;Kaşıma göre&quot;,
              &quot;Bıyığıma göre&quot;,
              &quot;Kafama göre&quot;
          ],
          trueChoice: &quot;Yeni Zelanda&quot;
      }
  
  
  
  ]
  
  function Quiz(question, score, index) {
      this.question = question;
      this.score = 0;
      this.index = 0;
  }
  
  Quiz.prototype.getQuestion = function () {
      return this.question[this.index];
  }
  Quiz.prototype.checkAnswer = function (answer) {
      if (answer == this.question[this.index].trueChoice) {
          this.score++;
          this.index++;
          console.log(&quot;true&quot;);
          return true;
      }
      else {
          this.index++;
          console.log(&quot;false&quot;);
          return false;
      }
  }
  
  const getQuiz = new Quiz(questions);
  
  loadQuestion();
  
  
  function loadQuestion() {
      const question = getQuiz.getQuestion();
      const getNumber = getQuiz.index;
      questionTitle.firstElementChild.textContent = question.title;
      questionNumber.firstElementChild.textContent = getNumber + 1;
      choice.forEach(function (choice, x) {
          choice.textContent = question.choice[x];
  
      })
      choices.addEventListener(&quot;click&quot;, function (e) {
          if (e.target.className == &quot;choice&quot;) {
              getQuiz.checkAnswer(e.target.textContent)
              loadQuestion();
          }
      })
  }
  </code></pre>