我无法从文本字段获取值并将其存储在变量中

Question

我正在使用 HTML CSS 和 JavaScript 开发一个基于网络的聊天应用程序。我正在使用 aivinya 提供的名为 AivaChat API 的 API。我想从文本字段 id = "prompt" 获取输入并将其存储在名为 input 的变量中，我可以将其传递到 API 上。一切似乎都工作正常，我在 DevTools 上看不到任何错误。这是我第一次使用 API，但 API 似乎响应正确，您可以看到它响应占位符文本。

This is what the output looks like:

这是我的 HTML 代码：

<!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>

这是我的Javascript代码：

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")
}

我尝试从函数返回“输入”并将其传递到原始变量（“文本”字段），如下所示：

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

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

还有其他一些事情，但结果似乎没有改变。我希望它能够响应文本字段中的提示[在本例中是询问“什么是问题”而不是“什么是占位符”]。

Answer 1

这样的东西会起作用

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

您的代码的问题是，在调用

raw

函数后，您不会更新

requestOptions

和

takePrompt

变量，因此始终获取第一个初始化值。

我无法从文本字段获取值并将其存储在变量中

问题描述投票：0回答：1

1个回答

最新问题

我无法从文本字段获取值并将其存储在变量中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1