无法从文本框取值并传入AivaChat API的问题求助

问题现象 #

开发Web聊天应用并集成AivaChat API后，API始终响应初始占位文本What is a placeholder?，无法获取文本框输入的内容，DevTools无报错，API本身可正常响应初始请求。

问题根源 #

代码中raw（请求体JSON字符串）和requestOptions在页面加载时就已初始化，此时input变量为初始值。后续点击Take Text按钮修改input变量时，raw和requestOptions里的body不会同步更新，导致每次请求都携带最初的占位文本。

修复方案 #

将请求体生成逻辑移到onClick函数内部，每次点击Submit按钮时，基于最新的input值创建请求体，确保API收到用户输入的内容。

修复后的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;
}

function onClick(){
    // 每次点击时重新生成请求体和配置
    var raw = JSON.stringify({
        "text": input
    });

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

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

优化建议（可选） #

可去掉Take Text按钮，直接在onClick函数内获取输入框当前值，简化操作流程：

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

function onClick(){
    // 直接获取输入框当前值
    var input = document.getElementById("prompt").value;
    var raw = JSON.stringify({
        "text": input
    });

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

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

对应HTML可删除Take Text按钮及takePrompt相关代码。

内容的提问来源于stack exchange，提问作者krishna ravishanker