问题描述
我目前正在制作一个小型网站，有人可以在其中输入字谜，该网站将返回可以从字谜中组成的所有可能的单词。返回所有单词后，您可以单击某个单词以给出其所有定义。
当我使用实时服务器在本地运行该站点时，该站点工作正常，问题是当我使用 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>当我输入“英亩”作为字谜时，我已经包含了我从两者中获得的结果的屏幕截图。
Here is the link to the GitHub repository itself
我就是不明白为什么它和本地的不一样。有什么我在这里遗漏的吗？
解决方法
查看返回的字典（\n 分隔的字符串），我无法弄清楚为什么要删除单词数组的每个单词的最后一个字符：
ClassifierBasedGermanTagger.py当输入字母 'a' 时，该代码将 24 'a',24 'b',24 'c'...24 'z' 放入单词数组中。因此，在尝试查找字谜时，它也在搜索这些字母。
我认为没有明显的理由拥有该代码。据我所知，如果您将其删除，则会产生您期望的结果。