javascript - GitHub Pages 网站的运行方式与使用实时服务器在本地运行时不同

Question

我目前正在制作一个小型网站，有人可以在其中输入字谜，该网站将返回所有可以从字谜组成的单词。返回所有单词后，您可以单击一个单词以给出其所有定义。

当我使用实时服务器在本地运行该站点时，它工作正常，问题是当我使用 GitHub Pages 部署存储库时。

在本地运行时，当我输入一个词(例如英亩)时，该站点将返回所有可以正确找到的可能词，但是当我使用 GitHub Pages 执行相同操作时，该站点不会返回相同的词。与查找所有可能单词相关的所有逻辑都在我的 script.js 文件中，所以我猜问题可能在那里？ script.js 文件读取 dictionary.txt 文件以获取一组单词并过滤它们以找到可以从字谜中组成的单词。 script.js 文件还负责从外部词典 API 中获取给定单词的定义，并将数据添加到主 html 文件中。

这是 script.js 文件。对不起，如果它有点乱!我对在前端编写 JavaScript 有点陌生。我还包含了 index.html 和 style.css 文件，以防其中一个出现问题。

let inputElement = document.querySelector("#anagram-input");

inputElement.addEventListener("keyup", onKeyUp);

let words = [];

fetch("dictionary.txt")
  .then(res => {
    return res.text();
  })
  .then(dictionary => {
    words = dictionary.split("\n");
    for (let i = 0; i < words.length; i++) {
      words[i] = words[i].slice(0, -1);
    }
  })
  .catch(error => {
    console.log(error);
  })

function fetchDefinitions(e) {
  let chosenWord = e.target.parentElement.parentElement.firstElementChild.textContent;
  fetch(`https://wordsapiv1.p.rapidapi.com/words/${chosenWord}/definitions`, {
      "method": "GET",
      "headers": {
        "x-rapidapi-key": "API-KEY",
        "x-rapidapi-host": "wordsapiv1.p.rapidapi.com"
      }
    })
    .then(res => {
      return res.json();
    })
    .then(data => {
      let cardInnerElement = e.target.parentElement.parentElement.parentElement;
      cardInnerElement.style = "transform: rotateY(180deg)";
      let cardFrontElement = cardInnerElement.firstElementChild;
      cardFrontElement.style = "transform: rotateY(180deg)";
      addDefinitionsHTML(cardFrontElement, data);
    })
    .catch(err => {
      console.error(err);
    });
}

function addDefinitionsHTML(element, data) {
  let definitionsHTML;
  if (data.success === false || definitions.length === 0) {
    definitionsHTML = `No definition for this word is currently available. Sorry!`;
    element.lastElementChild.innerHTML = definitionsHTML;
    return;
  }
  definitionsHTML = `<p class="card-title" style="text-align: left">Definitions of ${data.word}:</p><ul>`;
  for (let i = 0; i < data.definitions.length; i++) {
    definitionsHTML += `<p style="text-align: left">${data.definitions[i].definition}</p>`;
  }
  definitionsHTML += `</ul>`;
  element.lastElementChild.innerHTML = definitionsHTML;
}

function onKeyUp(e) {
  let enteredWord = e.target.value;
  return findWordsFromAnagram(enteredWord);
}

function findWordsFromAnagram(anagram) {
  let filteredWordList = [];
  let finalWordList = [];
  anagram = anagram.toLowerCase().split("").sort();
  //filter the dictionary list by the length of the anagram
  for (let i = 0; i < words.length; i++) {
    if (words[i].length === anagram.length) {
      filteredWordList.push(words[i]);
    }
  }
  //make a copy of filteredWordList and sort all words inside alphabetically
  let sortedFilteredWordList = filteredWordList.map(x => x);
  for (let i = 0; i < sortedFilteredWordList.length; i++) {
    sortedFilteredWordList[i] = sortedFilteredWordList[i].split("").sort();
  }
  //Add any words from filteredWordList that have the same letters as anagram to finalWordList
  for (let i = 0; i < filteredWordList.length; i++) {
    let booleanTracker = true;
    for (let j = 0; j < anagram.length; j++) {
      if (sortedFilteredWordList[i][j] != anagram[j]) {
        booleanTracker = false;
      }
    }
    if (booleanTracker) {
      finalWordList.push(filteredWordList[i]);
    }
    booleanTracker = true;
  }
  return outputWordsFromAnagram(finalWordList);
}

function outputWordsFromAnagram(words) {
  let outputElement = document.querySelector("#output");
  let outputHTML = ``;
  for (let i = 0; i < words.length; i++) {
    outputHTML += `<div class="col-lg-12 col-m-12 col-sm-12 col-xs-12 mb-3 flip-card">
                                <div class="text-center flip-card-front">
                                    <div class="card border-primary flip-card-inner">
                                        <div class="card-header"><h5>${words[i]}</h5></div>
                                        <div class="card-body text-primary">
                                            <p id="definitions" class="click">Click here for its definition!<p>
                                        </div>
                                    </div>
                            </div>
                        </div>`;
  }
  outputElement.innerHTML = outputHTML;
  let definitionElements = document.querySelectorAll("#definitions");
  for (let i = 0; i < definitionElements.length; i++) {
    definitionElements[i].addEventListener("click", fetchDefinitions);
  }
}

html,
body {
  margin: 0px;
  height: 100%;
}

.click:hover {
  cursor: pointer
}

.flip-card {
  perspective: 1000px;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}


/* Position the front and back side */

.flip-card-front {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anagram App</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
  <header>
    <h1 class="text-center">Anagram App</h1>
  </header>
  <div class="container">
    <div class="input-group">
      <input id="anagram-input" type="text" class="form-control" placeholder="Anagram">
    </div>
  </div>
  <div class="container mt-3">
    <div id="output" class="row">
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>

GitHub 页面的链接是 here

当我输入“acres”作为字谜时，我已经包含了我从这两个结果中获得的屏幕截图。

• GitHub Pages screenshot
• Live Server screenshot

Here is the link to the GitHub repository itself

我只是不明白为什么它的工作方式与本地的不一样。我在这里缺少什么吗？

Answer 1

查看返回的字典(\n 分隔字符串)，我不明白为什么要删除单词数组中每个单词的最后一个字符:

for (let i = 0; i < words.length; i++) {
   words[i] = words[i].slice(0,-1);
}

当键入字母“a”时，该代码会将 24 个“a”、24 个“b”、24 个“c”...24 个“z”放入单词数组中。因此，在尝试查找字谜时，它也在搜索这些字母。

我认为没有明显的理由需要该代码。据我所知，如果您删除它会产生您期望的结果。