單擊按鈕時不會觸發回呼功能。無法知道為什么控制臺沒有拋出錯誤-有解無憂

我在按鈕元素上使用事件偵聽器。用戶首先要求選擇一種語言。一旦他們這樣做了，他們就會看到有問題的按鈕。單擊它會觸發回呼功能，使用戶能夠開始進行測驗。直到今天早上，一切都在正常作業。但是現在當我單擊所述按鈕時沒有任何反應。控制臺甚至不會拋出錯誤，這會讓我知道哪里出了問題。

我繼續閱讀 MDN 檔案 - 請參閱下面的鏈接 - 他們說帶有 type="button" 的按鈕：“沒有默認行為，默認按下時什么也不做。它可以讓客戶端腳本監聽元素的事件，當事件發生時觸發。”

我擺脫了這個屬性，但按鈕仍然沒有回應。

const intro = document.querySelector(".intro");
const finalMessage = document.querySelector(".finalMessage")
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");
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";
  finalScore.style.display = "none"
  app();
  console.log("josue")
}

// 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 = "block";
  finalMessage.style.display = "flex";

  let scoreDisplayed = (score / numberOfChoices) * 100;
  finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}

  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;
}



.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 {
  display: none;

  position: relative;
  height: 400px;
  width: 400px;
  border: 1px blue solid;
  background: red;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.finalMessage {
  position: absolute;

  justify-content: center;
  align-items: center;

  display: none;
  border: solid black 1px;
  border-radius: 100%;
  height: 200px;
  width: 500px;

  color: blue;
  transform: translateY(-120px);
  transform: translateX(500px);
}

.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;
}


.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="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 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 src="images/dragon-ball-z-goku.gif" alt="">
    </div>
    <p class="finalMessage">
      <div class=""></div>
    </p>

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

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="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>

uj5u.com熱心網友回復：

您的 HTML 無效。P 不能包含 DIV 和兩者創建的空 P

<p><div class=welcomeText></div></p>

和

<p class="finalMessage">
  <div class=""></div>
</p>

你有塊點擊選擇

這是一個作業版本

const intro = document.querySelector(".intro");
const finalMessage = document.querySelector(".finalMessage")
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");
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";
  finalScore.style.display = "none"
  app();
  console.log("josue")
}

// 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 = "block";
  finalMessage.style.display = "flex";

  let scoreDisplayed = (score / numberOfChoices) * 100;
  finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}

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;
}

.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 {
  display: none;
  position: relative;
  height: 400px;
  width: 400px;
  border: 1px blue solid;
  background: red;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.finalMessage {
  position: absolute;
  justify-content: center;
  align-items: center;
  display: none;
  border: solid black 1px;
  border-radius: 100%;
  height: 200px;
  width: 500px;
  color: blue;
  transform: translateY(-120px);
  transform: translateX(500px);
}

.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;
}

.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="index.css">
  <title>anime page</title>
</head>

<body>
  <div class="intro">
    <img class="intro_image" src="images/backgroundImage.jpeg" alt="">
    <div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div>
    <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 src="images/dragon-ball-z-goku.gif" alt="">
  </div>
  <div class="finalMessage">
    
  </div>

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

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/474334.html

標籤：javascript html css 按钮打回来

上一篇：Haskell標準：無法加載模塊，隱藏包

下一篇：如何通過按下按鈕創建計時器分鐘？