我正在使用HTML CSS和Javascript开发一个基于Web的聊天应用程序。我正在使用aivinya的AivaChat 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")
}我试着从函数中返回'input'，并将其传递到原始变量（'text'字段），如下所示：
var input = function takePrompt(){
var input2 = document.getElementById("prompt").value;
console.log(input2);
return input2;
}
var raw = JSON.stringify({
"text": input
}
);和其他一些事情，但结果似乎没有改变。我期望它响应文本字段中的提示[在这种情况下，要问“什么是问题”，而不是“什么是占位保持器”]
2条答案
按热度按时间wb1gzix01#
由于函数只在调用时执行内的代码，因此原始变量使用占位符文本，并在输入变量更新之前将其传递到API。将原始变量和requestOptions变量转移到onClick函数中，它应该像您现在首先更新'input'中的值，然后将其传递到'raw'中一样工作。如果我的解释错误，请纠正我。
The solution and result
13z8s7eq2#
这样的东西会有用的
代码的问题是在调用
takePrompt函数后没有更新raw和requestOptions变量，因此总是获取第一个初始化值。