英文:
function work just one time but not the second (i have to referesh the page)
问题
我创建了两个带有翻译功能的框,第一个从母语(意大利语)翻译为依赖于应用登录的恢复语言;第二个从应用登录中检索的语言翻译为意大利语;
框看起来像这样;
第一个框的id=#message,第二个框的id=#message_lang;
为此,我正在使用DeepL API。
第一个框的目的是用意大利语编写/获取文本。
第二个框用于用其他语言编写,目的是获取翻译后的文本(意大利语)在第一个框中,还可用于从意大利语获取翻译后的文本。
我使用了两个箭头按钮,每个按钮都有一个功能:
左箭头从语言X翻译为意大利语;
右箭头从意大利语翻译为语言X;
btnTranslate_left.addEventListener("click", () => {
let fromLang = getTargetLang(langToTranslate)
let toLang = getTargetLang(1);
translateHandler(fromLang, toLang, box_b, box_a);
});
btnTranslate_right.addEventListener("click", () => {
let toLang = getTargetLang(langToTranslate)
let fromLang = getTargetLang(1);
translateHandler(fromLang, toLang, box_a, box_b);
});
const getTargetLang = (langToTranslate) => {
return languageData[langToTranslate];
}
async function translateHandler(fromLang, toLang, inputSource, inputDestination) {
const translatedText = await translate(inputSource.value, fromLang, toLang);
inputDestination.innerText = translatedText;
}
async function translate(textToTranslate, fromLang, toLang) {
const API_URL = `${ConfigJson.apiDeepLUrl}auth_key=${ConfigJson.apiDeepLKey}&text=${textToTranslate}&source_lang=${fromLang}&target_lang=${toLang}`;
const response = await fetch(API_URL);
const data = await response.json();
return data.translations[0].text;
};
getTargetLang
提供将id lang转换为语言的首字母,例如:
1=>"IT",
2=>"FR",
等等
translate
它用于将给定的文本翻译为特定语言(DeepL);
translateHandler
它处理翻译函数的响应,如果响应是意大利语,它将放在第一个框内;否则,翻译后的文本将放在第二个框内。
问题
这些函数每次都能从意大利语翻译为X语言,但从X语言翻译为意大利语只能工作一次,之后我必须刷新页面。控制台中没有错误。可能是什么问题?
我尝试移除async/await但没有成功。
我不明白问题可能是什么。
非常感谢!
英文:
I created two boxes with translator function, the first translates from native language (Italian) into a recovered language depending on the login on the application; the second from the language retrieved from the login on the application to Italian;
boxes looks like that;
the first box has id=#message, the second one id=#message_lang;
For do that I'm using the DeepL API.
The purpose is to use the first one box for write/get the text in italian.
The second box is for write in a others languages with the purpose to get the translated text (in italian) in the first box but also for get translated text from italian.
I used two arrows buttons where each of them has a function:
left arrow translate from language X to italian;
right arrow translate from italian to language X;
btnTranslate_left.addEventListener("click", () => {
let fromLang = getTargetLang(langToTranslate)
let toLang = getTargetLang(1);
translateHandler(fromLang, toLang, box_b, box_a);
});
btnTranslate_right.addEventListener("click", () => {
let toLang = getTargetLang(langToTranslate)
let fromLang = getTargetLang(1);
translateHandler(fromLang, toLang, box_a, box_b);
});
const getTargetLang = (langToTranslate) => {
return languageData[langToTranslate];
}
async function translateHandler(fromLang, toLang, inputSource, inputDestination) {
const translatedText = await translate(inputSource.value, fromLang, toLang);
inputDestination.innerText = translatedText;
}
async function translate(textToTranslate, fromLang, toLang) {
const API_URL = `${ConfigJson.apiDeepLUrl}auth_key=${ConfigJson.apiDeepLKey}&text=${textToTranslate}&source_lang=${fromLang}&target_lang=${toLang}`;
const response = await fetch(API_URL);
const data = await response.json();
return data.translations[0].text;
};
getTargetLang
provide to convert the id lang into initial of language ex:
1=>"IT",
2=>"FR",
ets,ets
translate
it provide to translate the text given into a specific language(DeepL);
translateHandler
it handle the translate function response and if the response is in italian, that will be put inside the first box; otherwise the translated text will be putting inside the second box.
THE PROBLEM
the functions works every time from italian to X language but from X language to italian it works just one time but after I have to refresh the page.I have not error in the console. What it can be?
I tried to remove async/await but without success.
I don't understand what the problem can be.
thank you very much!
答案1
得分: 1
我通过更改框的HTML元素来解决了这个问题;错误是由与textarea
或input
关联的innerHTML
或textContent
方法生成的;这些框没有这些方法/属性。通过将.value
与这些框关联,问题已解决。
感谢大家的建议!
英文:
I solved the problem by changing the HTML elements of the boxes; the error was generated by the innerHTML
or textContent
method associated with the textarea
or input
; Such boxes do not have these methods/properties. By associating the .value
to the boxes, the problem has been solved.
Thank you all for the advice!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论