I have this fake wordle game
I think that the problem is with fetching the api and returning the functions for validation. I get an error that "getData(...).isCorrect
is not a function" whenever I press submit and when I try without the parenthesis in index.html, the game won’t display anything. Is there another way to do this, or is this just a simple bug in my code?
async function getData() {
var response = await fetch("https://all-wordle-words.kobyk1.repl.co/script.js");
var data = await response.json();
const wordsArray = data;
const words = new Set(wordsArray);
const chosen = wordsArray[Math.floor(Math.random() * wordsArray.length)];
function check(word) {
let result = Array(5).fill("gray");
let chosenChars = [...chosen];
for (let i = 0; i < 5; i++) {
if (word[i] === chosenChars[i]) {
result[i] = "green";
chosenChars[i] = "G";
} else {
for (let j = 0; j < 5; j++) {
if (word[i] === chosenChars[j]) {
result[i] = "yellow";
chosenChars[j] = "Y";
}
}
}
}
return result;
}
function isCorrect() {
let word = document.getElementById("guess").value.toLowerCase();
if (words.has(word)) {
result = check(word);
let element = document.getElementById("guesses");
element.innerHTML += colorResult(word, result);
if (chosen === word) {
alert("You found the word!");
}
} else {
alert("Sorry, that word is not in our dictionary!");
}
}
function colorResult(word, result) {
word = word.toUpperCase();
let columns = "";
for (let i = 0; i < 5; i++) {
columns += `<td style="background-color: ${result[i]};">${word[i]}</td>`;
}
return "<tr>" + columns + "</tr>";
}
return {
check,
isCorrect,
colorResult
}
}
<h1>KORDLE</h1>
<table id="guesses">
<tr></tr>
</table>
<br>
<input type="text" id="guess">
<button onclick="getData().isCorrect()">Submit</button>
2
Answers
You need to chain the async function with a .then
I would use an eventListener and change the name of the function since it does way more than just getting data
According to async function, your function returns a promise not an object.
So just try to replace
with