DeepL API翻译异常：非意语译意仅首次生效需刷新

根据你描述的现象和提供的代码，目标语言译意大利语功能仅首次生效的问题，大概率来自以下两个核心原因，对应解决方案如下：

1. 输入框内容读写属性错误 #

你的代码中使用inputDestination.innerText = translatedText来设置翻译结果，但如果box_a/box_b是<input>或<textarea>类型的输入框，这类元素的可编辑内容由value属性控制，而非innerText。

• 首次生效可能是浏览器兼容性导致的临时同步，但后续操作会打破这个同步，导致翻译结果无法显示在输入框中。
• 解决方案：统一根据元素类型选择正确的读写属性：

async function translateHandler(fromLang, toLang, inputSource, inputDestination) {
    // 根据元素类型获取源文本
    const sourceText = inputSource.tagName.match(/INPUT|TEXTAREA/) 
        ? inputSource.value 
        : inputSource.textContent;
    const translatedText = await translate(sourceText, fromLang, toLang);
    // 根据元素类型设置目标内容
    if (inputDestination.tagName.match(/INPUT|TEXTAREA/)) {
        inputDestination.value = translatedText;
    } else {
        inputDestination.textContent = translatedText;
    }
}

2. GET请求的浏览器缓存问题 #

代码中使用GET请求调用DeepL API，浏览器会自动缓存相同URL的请求结果。当你重复输入相同文本时，第二次及之后的请求会直接读取缓存而非发起新的API调用，若缓存结果异常就会导致翻译失效。

• 解决方案：改用POST请求调用DeepL API（官方也推荐POST处理文本翻译），同时避免URL参数缓存：

async function translate(textToTranslate, fromLang, toLang) {
    const API_URL = `${ConfigJson.apiDeepLUrl}`;
    const formData = new FormData();
    formData.append('auth_key', ConfigJson.apiDeepLKey);
    formData.append('text', textToTranslate);
    formData.append('source_lang', fromLang);
    formData.append('target_lang', toLang);

    const response = await fetch(API_URL, {
        method: 'POST',
        body: formData
    });
    const data = await response.json();
    return data.translations[0].text;
};

额外检查点 #

• 确认box_a和box_b的DOM引用未在后续操作中被覆盖或销毁，比如是否存在动态渲染替换元素的逻辑。
• 可以在translateHandler开头添加console.log(sourceText, fromLang, toLang)，确认每次点击时的源文本、语言参数是否正确，排查参数异常问题。

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