I'm unable to take value from text field and store it in a variable

Question

I'm working on a web based chat app using HTML CSS and Javascript. I'm using an API called AivaChat API by aivinya. I want to take input from the text field id = "prompt" and store it in a variable called input which I can pass onto the API. Everything seems to be working correctly and I can see no errors on DevTools. This is my first time working with APIs, but it seems that the API is responding correctly as you can see it responds to the placeholder text.

This is what the output looks like:

This is my HTML Code:

<!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>Document</title>
</head>
<body>
    <h1 id="titlish">Enter prompt: </h1>
    <input type="text" id="prompt" placeholder="Enter text">
    <button id="promptin" onclick="takePrompt()">Take Text</button>
    <button id="myButton" onclick="onClick()">Submit</button>
    <h2 id="gpt"></h2>

    <script src="./index.js"></script>
</body>
</html>

This is my Javascript code:

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var input = "What is a placeholder?"

function takePrompt(){
    var input2 = document.getElementById("prompt").value;
    console.log(input2);
    input = input2;
}

var raw = JSON.stringify({
    "text": input
  }
);

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

function onClick(){

    let textEl = document.getElementById("gpt");

    fetch("https://api.aivinya.education/api/public/aivachat", requestOptions)
    .then(response => response.text())
    .then(result => {textEl.innerText = result;})
    .catch(error => console.log('error', error));
    console.log("working function")
}

I tried returning 'input' from the function and passing that onto the raw variable( 'text' field ) like so:

var input = function takePrompt(){
    var input2 = document.getElementById("prompt").value;
    console.log(input2);
    return input2;
}

var raw = JSON.stringify({
    "text": input
  }
);

And a few other things but the results don't seem to change. I expected it to respond to the prompt in the text field [In this case to question "What is a problem" not "What is a place holder"]

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Dexygen, Mar 18 '23 at 11:59

score 0 · Accepted Answer · answered Mar 27 '23 at 19:39

Something like this would work

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var input = "What is a placeholder?";
var raw;
var requestOptions;

function takePrompt() {
  var input2 = document.getElementById("prompt").value;
  console.log(input2);
  input = input2;
  raw = JSON.stringify({
    text: input,
  });
  requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  };
}

function onClick() {
  let textEl = document.getElementById("gpt");

  fetch("https://api.aivinya.education/api/public/aivachat", requestOptions)
    .then((response) => response.text())
    .then((result) => {
      textEl.innerText = result;
    })
    .catch((error) => console.log("error", error));
  console.log("working function");
}

The issue with your code is that you don't update the raw and requestOptions variables after calling takePrompt function, so always get the first initialized value.

I'm unable to take value from text field and store it in a variable

1 Answers1