英文:
Calling a returned function gives "not a function"
问题
Sure, here is the translated content without the code:
我有这个假的 Wordle 游戏。
我认为问题出在获取 API 并返回验证函数方面。每当我按下提交按钮时，我会收到错误消息，指出 "getData(...).isCorrect" 不是一个函数。而当我在 index.html 中去掉括号尝试时，游戏就不会显示任何内容。是否有其他方法可以解决这个问题，或者这只是我的代码中的一个简单错误？
我希望这能帮助你。如果你需要进一步的帮助，请告诉我。
英文:
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?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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}}
<!-- language: lang-html -->
<h1>KORDLE</h1><table id="guesses"><tr></tr></table><br><input type="text" id="guess"><button onclick="getData().isCorrect()">Submit</button>
<!-- end snippet -->
答案1
得分: 2
根据异步函数，您的函数返回一个 promise 而不是一个对象。
所以尝试替换
<button onclick="getData().isCorrect()">Submit</button>
与
<button onclick="getData().then(obj => obj.isCorrect())">Submit</button>
英文:
According to async function, your function returns a promise not an object.
So just try to replace
<button onclick="getData().isCorrect()">Submit</button>
with
<button onclick="getData().then(obj => obj.isCorrect())">Submit</button>
答案2
得分: 0
你需要将异步函数与.then链式连接。
我会使用事件监听器，并更改函数的名称，因为它不仅仅获取数据。
async function init() {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)];console.log(chosen);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}}init().then((myInit) => {document.getElementById("sub").addEventListener("click", () => myInit.isCorrect());});
<h1>KORDLE</h1><table id="guesses"><tr></tr></table><br><input type="text" id="guess"><button id="sub">Submit</button>
英文:
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
init().then((myInit) => {document.getElementById("sub").addEventListener("click", () => myInit.isCorrect());});
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
async function init() {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)];console.log(chosen)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}}init().then((myInit) => {document.getElementById("sub").addEventListener("click", () => myInit.isCorrect());});
<!-- language: lang-html -->
<h1>KORDLE</h1><table id="guesses"><tr></tr></table><br><input type="text" id="guess"><button id="sub">Submit</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论