为什么单击事件侦听器时我的页面未加载？

Question

我正在创建动漫测验。因此，当用户点击“欢迎参加动漫测验”时，s/he 应该会显示 4 个不同的动漫标题。但是，当我这样做时没有任何反应。该页面甚至没有加载。这个问题似乎来自我在 generateChoices() 中编写的两行代码。当我将它们注释掉并且 console.log("Hi") 代码有效时。我不知道如何确定问题所在，因为当我取消注释有问题的两行代码时，我什至无法使用调试。我想我可能已经创建了一个无限循环，但不能确定。

let japaneseAnime = [
  {
  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"
}

]

const intro = document.querySelector(".intro");
const choices = [...document.querySelector(".question").children];
const anime = document.querySelector(".anime");
let anime_picture = document.querySelector(".anime_picture img");
let counter = [0]

intro.addEventListener("click", startQuiz);

function startQuiz() {
  intro.classList.add("hide");
  anime.classList.remove("hide");
  generateChoices();

}

const getRandom = () => Math.floor(Math.random()*choices.length)


function uniqueChoices(count) {
  let choicesArray = new Set()

  while(!choicesArray.has(counter)) {
    choicesArray.clear();
    while(choicesArray.size < count) choicesArray.add(getRandom())
  }

  return [...choicesArray]
}

function generateChoices() {
  let choicesArray = uniqueChoices(choices.length);
  choices.forEach((choice, i) => choice.innerHTML = japaneseAnime[choicesArray[i]].name)
}

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

.intro {
  height: 300px;
  width: 300px;
  border: 1px blue solid;
  position: absolute;
  left: 25%;
  text-align: center;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.anime {
  height: 800px;
  width: 800px;
  border: 1px red solid;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

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

.question {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.question > div {
  height: 80px;
  width: auto;
  border: 1px black solid;
  background-color: #ddd;
}

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

header {
  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
}

<!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">
      welcome to the anime website
    </div>
    <div class="anime hide">
      <div class="anime_picture">
        <img src="" alt="">

      </div>
      <div class="question">
        <div class="question1"></div>
        <div class="question2"></div>
        <div class="question3"></div>
        <div class="question4"></div>
      </div>
      <header>anime Quiz</header>

    </div>

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

Answer 1

uniqueChoices 处的嵌套 while 语句形成无限循环。
所以，

我在 japaneseAnime 中制作了 getUniqueChoices 其中 returns 一个随机元素，其中包含问题列表的长度。参考代码来自 how to make random elements form an array.
并将innerHTML替换为textContent。因为 innerHTML 容易受到安全问题的影响。

const japaneseAnime = [
  {
    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"
  }
];

const intro = document.querySelector(".intro");
const anime = document.querySelector(".anime");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".question").children];

intro.addEventListener("click", startQuiz);

function startQuiz() {
  intro.classList.add("hide");
  anime.classList.remove("hide");
  generateChoices();
}

function getUniqueChoices() {
  return japaneseAnime.sort(() => 0.5 - Math.random()).slice(0, choices.length);
}

function generateChoices() {
  const uniqueChoices = getUniqueChoices();
  const randomNumber = Math.floor(Math.random() * choices.length);
  
  anime_picture.src = uniqueChoices[randomNumber].picture;
  choices.forEach((choice, i) => {
    choice.textContent = uniqueChoices[i].name;
  });
}

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

.intro {
  height: 300px;
  width: 300px;
  border: 1px blue solid;
  position: absolute;
  left: 25%;
  text-align: center;
  cursor: pointer;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.anime {
  height: 800px;
  width: 800px;
  border: 1px red solid;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

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

.question {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.question > div {
  height: 80px;
  width: auto;
  border: 1px black solid;
  background-color: #ddd;
}

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

header {
  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
}

<!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">
      welcome to the anime website
    </div>
    <div class="anime hide">
      <div class="anime_picture">
        <img src="" alt="">
      </div>
      <div class="question">
        <div class="question1"></div>
        <div class="question2"></div>
        <div class="question3"></div>
        <div class="question4"></div>
      </div>
      <header>anime Quiz</header>
    </div>
  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

编辑

我使用您需要的 Set 对象制作了它。
希望这会有所帮助。

const japaneseAnime = [
  {
    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"
  }
];

const intro = document.querySelector(".intro");
const anime = document.querySelector(".anime");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".question").children];
const numOfChoices = [...document.querySelector(".question").children].length;

intro.addEventListener("click", startQuiz);

function startQuiz() {
  intro.classList.add("hide");
  anime.classList.remove("hide");
  generateChoices();
}

function getRandomNumber () {
  return Math.floor(Math.random() * numOfChoices)
}

function getUniqueChoices() {
   const choicesArray = new Set()

   while(choicesArray.size < numOfChoices) {
      choicesArray.add(japaneseAnime[getRandomNumber()])  
   }  

  return [...choicesArray];
}

function generateChoices() {
  const uniqueChoices = getUniqueChoices();
  const randomNumber = getRandomNumber();
  
  anime_picture.src = uniqueChoices[randomNumber].picture;
  choices.forEach((choice, i) => {
    choice.textContent = uniqueChoices[i].name;
  });
}

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

.intro {
  height: 300px;
  width: 300px;
  border: 1px blue solid;
  position: absolute;
  left: 25%;
  text-align: center;
  cursor: pointer;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.anime {
  height: 800px;
  width: 800px;
  border: 1px red solid;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

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

.question {
  height: 100px;
  width: 100%;
  border: 1px blue solid;
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.question > div {
  height: 80px;
  width: auto;
  border: 1px black solid;
  background-color: #ddd;
}

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

header {
  width: 100%;
  height: 100px;
  border: 1px black solid;
  position: absolute;
  top: 0;
}

<!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">
      welcome to the anime website
    </div>
    <div class="anime hide">
      <div class="anime_picture">
        <img src="" alt="">
      </div>
      <div class="question">
        <div class="question1"></div>
        <div class="question2"></div>
        <div class="question3"></div>
        <div class="question4"></div>
      </div>
      <header>anime Quiz</header>
    </div>
  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

为什么单击事件侦听器时我的页面未加载？

Why is my page not loading when clicking on event listener?

html

javascript

foreach

addeventlistener

编辑