0

I am trying to make a trivia game using an api, and my elements are not clickable. After I make the api call, I am looping through my responses and using jQuery I am making each response into an html p tag element. My next step is to determine which response is the correct one, but first I want to test each element with a click listener. This is where I am currently stuck. There is no response when I click any p tag. There should be a message logged into the console. Any idea's to help me out?

$(document).ready(onReady);

function onReady() {
  console.log("jQuery in tha house!");
  $("#btn").on("click", askQuestions);
  $("#answer").on("click", determineCorrect);
}
let axiosbtn = document.querySelector("#axios");
let url = "https://opentdb.com/api.php?amount=1";

function shuffle(array) {
  let currentIndex = array.length,
    temporaryValue,
    randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

let askQuestions = () => {
  axios
    .get(url)
    .then(res => {
      $("#question").html(res.data.results[0].question);

      rightAnswer = res.data.results[0].correct_answer;
      let answers = [rightAnswer];
      let wrongAnswers = res.data.results[0].incorrect_answers;
      wrongAnswers.forEach(wrong => {
        answers.push(wrong);
      });
      let newAnswers = [];
      $.each(answers, (i, answer) => {
        newAnswers.push("<p id='answer'>" + answer + " " + "</p>");
      });
      shuffle(newAnswers);
      $("#answers").html(newAnswers.join(""));
      console.log(shuffle(newAnswers));
      console.log(rightAnswer);
    })
    .catch(err => {
      console.log("Error", err);
    });
};

let determineCorrect = () => {
  console.log("Determine Correct");
};

<body>
    <header>
        <h1 id="title">Random Trivia</h1>
    </header>
    <div>
        <button id="btn">Get Random Trivia Question</button>
        <h2 id="question"></h2>
    </div>
    <div id="answers"></div>
</body>
</html>
RRhodes
  • 501
  • 6
  • 19
  • The issue is due to two problems in your code. Firstly you are repeating the same `id` in the content you create in the loop. This is invalid as `id` **have** to be unique in the DOM. Change this to a class. Secondly, you need to use delegated event handlers as the elements don't exist in the DOM at the point you try and bind event handlers to them. See both the duplicates for more information – Rory McCrossan Feb 29 '20 at 16:55
  • Okay, I'm not sure I understand. I thought my id's were unique (one is #answers and the other is #answer), but maybe has to be a class. Secondly, I tried adding my ul id (#answers) to the event handler: $(".answer").on("click", "#answers", determineCorrect); but that still didn't work. Can you explain what you mean? – RRhodes Feb 29 '20 at 17:12
  • `one is #answers and the other is #answer` that's right, but the HTML is being created in a loop, so it will be duplicated. – Rory McCrossan Feb 29 '20 at 17:17
  • Given your HTML the delegated handler should be `$("#answers").on("click", ".answer", determineCorrect);` Note that only `#answer` is changed to a class, as that's what you're duplicating in the loop – Rory McCrossan Feb 29 '20 at 17:18

0 Answers0