javascript – button not triggering call back function when clicked on. No way to know why as no error’s thrown by console

const intro = document.querySelector(".intro");
const select = document.querySelector("select");
const finalScoreImage = document.getElementById("finalScoreImage");
const welcomeText = document.querySelector(".welcomeText")
const btn = document.querySelector("button");
const header = document.querySelector("header")
const animeQuiz = document.querySelector(".animeQuiz");
const timer = document.querySelector(".timer");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".choices").children];
const numberOfChoices = choices.length;
const finalScore = document.querySelector(".finalScore");
const squares = document.querySelector(".squares");
const progressBar = document.querySelector(".progressBar");
console.log(progressBar)
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;

let japaneseAnime = []


let japaneseAnimeJapanese = [
  {
  name: "ドラゴンボール",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "進撃の巨人",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "ナルト",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "鬼滅の刃",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "攻殻機動隊",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]


let japaneseAnimeEnglish = [
  {
  name: "dragon ball",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "Attack On Titans",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "naruto",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "Demon Slayer",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "Ghost in the shell",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]


select.addEventListener("change", selectLanguage)

function selectLanguage() {
  if(select.value === "日本語") {
    welcomeText.innerHTML = "アニメクイズへようこそ下のボタンをクリックしてゲームを初めて下さい";
    btn.innerHTML = "クイズボタン";
    header.innerHTML = "画像に対応する名称を選択する";
    japaneseAnime = japaneseAnimeJapanese;
  } else {
    welcomeText.innerHTML = "Welcome to the amime quiz click on the button below to get started";
    btn.innerHTML = "quiz button";
    header.innerHTML = "select the name corresponding to the image"
    japaneseAnime = japaneseAnimeEnglish;
  }
  btn.style.display = "block"
  select.style.display = "none"
}


btn.addEventListener("click", startQuiz);

function startQuiz() {
  intro.style.display = "none";
  animeQuiz.style.display = "flex";
  app();
}

// generates number between 0 and 3
function randomNumber() {
  return Math.floor(Math.random()*numberOfChoices);
}

// generates array of uniques numbers
function uniqueNumbers() {
  let listUniqueNumbers = new Set();
  while(listUniqueNumbers.size < numberOfChoices) {
    listUniqueNumbers.add(randomNumber());
  }
  return [...listUniqueNumbers];
}

// display choices
function displayChoicesAndPicture() {
  anime_picture.src = japaneseAnime[counter].picture;
  let unique = uniqueNumbers();
  choices.forEach((choice, i) => {
    choice.innerHTML = japaneseAnime[unique[i]].name;
  })
}

// checking user answer
function userAnswer() {
  for(var i = 0; i < japaneseAnime.length; i++) {
    choices[i].addEventListener("click", checkAnswer);
  }
}

function checkAnswer(e) {
  e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}

function rightAnswer() {
  document.getElementById(counter).style.backgroundColor = "green"
  score++;
  console.log(score)
  update();
}

function wrongAnswer() {
  document.getElementById(counter).style.backgroundColor = "red"
  update();
}

function update() {
  if(counter < numberOfChoices - 1) {
    time = 0;
    counter++;
    displayChoicesAndPicture();
  } else {
    animeQuiz.style.display = "none"
    userScore();
  }
}

function userScore() {
  finalScore.style.display = "flex";
  finalScoreImage.style.display = "flex"
  let scoreDisplayed = (score / numberOfChoices) * 100;
  console.log(score)
  finalScore.innerHTML = `<p>your final score is ${scoreDisplayed}%</p>`
  // `<p>your final score is ${scoreDisplayed}%</p>`
}

  function displaySquares() {
    for(var i = 0; i < numberOfChoices; i++) {
      element = document.createElement("div");
      element.setAttribute("class", "square");
      element.setAttribute("id", i);
      squares.appendChild(element);
    }
  }

  function timedQuiz() {
    if(time < timeUp) {
      time++
    } else {
      time = 0;
      wrongAnswer();
      update();
    }
      timer.innerHTML = time;
  }


  const app = () => {
    displayChoicesAndPicture();
    userAnswer();
    displaySquares();
    setInterval(timedQuiz, 1000)
  }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  font-family: sans-serif;
  background-repeat: no-repeat;
}

p {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  /* background-color: red; */
}

.welcomeText {
  position: absolute;
  color: white;
  font-size: 35px;
  color: rgb(255,0,0);
}

button {
  position: absolute;
  transform: translateY(10ch);
}

select {
  position: absolute;
  transform: translateY(20ch);

}

.intro_image {
  position: fixed;
  object-fit: cover;
}

.intro {
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: fixed; */

  height: 100%;
  width: 100%;
  border: 1px blue solid;
}

.animeQuiz {
  display: none;
  justify-content: center;
  align-items: center;
  position: relative;

  height: 800px;
  width: 800px;
  border: 1px red solid;
}

.anime_picture {
  height: 400px;
  width: 400px;
  position: absolute;
}

.choices {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.finalScore {
  position: relative;
  display: none;
  justify-content: center;
  /* align-items: center;
  height: 400px;
  width: 400px;
  border: 1px blue solid; */
  /* background: red; */
}

#finalScoreImage {
  display: none;
}

.finalMessage {
  position: absolute;
}

.choices > div {
  height: 80px;
  width: 150px;
  border: 1px black solid;
  background-color: #EE6F57;
  cursor: pointer;
  border-radius: 10px;
}

.choices > div:hover {
  color: #EE6F;
}

.welcomeText {
  width: auto;
  height: auto;
  background: white;
  border-radius: 5px;
}

.choice {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 10px;
  color: white;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
  font-family: fantasy;
}

p .finalMessage {
  position: absolute;
}

.square {
  height: 15px;
  width: 15px;
  background-color: gray;
  bottom: 150px;
  margin: 10px;
}

.squares {
  position: absolute;
  bottom: 100px;
  display: flex;
  justify-content: space-around;
}

.timer {
  position: absolute;
  bottom: 150px;
}

.progressBar {
  height: 10px;
  width: 300px;
  position: absolute;
  bottom: 140px;
  background-color: grey;
  border: 1px black solid;
}

button {
  display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackoverflow.com/questions/72226742/index.css">
    <title>anime page</title>
  </head>
  <body>
    <div class="intro">
      <img class="intro_image" src="images/backgroundImage.jpeg" alt="">
      <p><div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div></p>
      <button type="button" name="button">button quiz</button>
      <select class="" name="">
        <option value="">Select a language</option>
        <option value="english">English</option>
        <option value="日本語">日本語</option>
      </select>
    </div>
    <div class="animeQuiz">
      <div class="anime_picture">
        <img src="" alt="">
      </div>
      <div class="choices">
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
        <div class="choice">
          <div class=""></div>
        </div>
      </div>
      <header>
        <div class="">Select the name corresponding to the image</div>
      </header>
      <div class="progressBar"></div>
      <div class="timer"></div>
      <div class="squares"></div>
    </div>
    <div class="finalScore">
      <img id="finalScoreImage" src="images/dragon-ball-z-goku.gif" alt="">
      <p class="finalMessage">well done, you've completed the quiz</p>
    </div>


  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

Leave a Comment