Question 168471 in Html Question posted in
Some basic documentation can be found here.

Why does calling a returned function give “not a function” in 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?

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>
Tags:

2

Answers


  1. 0

    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());
});

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search